useDebugValue

Check out the official React docs!

For more detailed information about React concepts and APIs, please refer to the official documentation for useDebugValue.

---

useDebugValue lets you display a label for custom hooks in React DevTools, making debugging easier.

// Custom hook that uses useDebugValue
let useOnlineStatus() =
    let isOnline, setIsOnline = React.useState(true)
    React.useDebugValue(if isOnline then "Online" else "Offline")
    // ..

Status: Online

Open React DevTools to see the debug value for this hook.

Show code

module Example.UseDebugValue

open Feliz

// Custom hook that uses useDebugValue
[<Hook>]
let useOnlineStatus() =
    let isOnline, setIsOnline = React.useState(true)
    React.useDebugValue(if isOnline then "Online" else "Offline")
    // Simulate status change for demo
    React.useEffect((fun () ->
        let timer = Fable.Core.JS.setTimeout (fun _ -> setIsOnline(not isOnline)) 2000
        fun () -> Fable.Core.JS.clearTimeout timer
    ), [| box isOnline |])
    isOnline

[<ReactComponent(true)>]
let UseDebugValue() =
    let isOnline = useOnlineStatus()
    Html.div [
        Html.p [ prop.text $"""Status: {(if isOnline then "Online" else "Offline")}""" ]
        Html.p [ prop.text "Open React DevTools to see the debug value for this hook." ]
    ]

Why useDebugValue?

When you build custom hooks, useDebugValue helps you show useful information in React DevTools for easier debugging. In Feliz, you can use it to display the current value or a formatted label for your hook.

Feliz specifics

The API closely matches React's JavaScript version. You can pass any value or string to useDebugValue.