See the order of hook-function calls in an interactive log, and inspect a function-component's props, state & refs inside its rendering.
dist/index.cjs.js
, dist/index.esm.js
, and dist/types/
.displayName
property.useReducer
, emit a 'dispatch'
trace when dispatch gets called, rather than an 'action'
trace when reduction starts.useTracer
now returns a stable TracePanel
that won't remount on each render.useTracer
is not the first hook function called in a traced component.TraceLog
is omitted.React.StrictMode
is active. Muting the extra strict-mode traces is not feasible, unfortunately. (Note that on CodeSandbox playgrounds, the warning only appears when the app is running in its own window.)useReducer
.Sample
demo to Counter
.useCallback
useContext
useEffect
useInsertionEffect
useLayoutEffect
useMemo
useRef
useState
TracePanel
component that shows used hooks and current values for props, state & refs.TraceLog
component that highlights trace origin in corresponding panel when hovering over traces.useTracer
hook takes an optional showProps
function to customize how props appear in the log & trace panels.useContext
, useMemo
, useRef
, and useState
) accept an optional show
function.trace
function to log messages to trace-log.