React Hook Tracer Versions Save

See the order of hook-function calls in an interactive log, and inspect a function-component's props, state & refs inside its rendering.

v1.4.0

1 year ago

Changes

  • Add support for NextJS and server-side rendering in general (fixes #2).
  • Reorganize published package directory layout: dist/index.cjs.js, dist/index.esm.js, and dist/types/.
  • Improve linting infrastructure and CI.
  • Update dependencies.

v1.3.1

1 year ago

Changes

  • Handle anonymous components and components with a displayName property.
  • Restore React DevTools inspection of traced components.
  • Update TypeScript to 4.9.3 & other dependencies to latest.

v1.3.0

1 year ago

Changes

  • For 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.
  • Throw an error when useTracer is not the first hook function called in a traced component.
  • Fix warning and possible crash when a traced ref is mutated during a render.
  • Custom show functions do not need to be stable anymore.
  • Clean up demo styles.

v1.2.0

1 year ago

Changes

  • Automatically trace to console when TraceLog is omitted.
  • Warn when 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.)
  • Fix & simplify trace-log & trace-panel styling.

v1.1.0

1 year ago

Changes

  • Add trace support for useReducer.
  • Restrict fixed-width font to values + Tweak styles.
  • Remove obsolete shift-up/down keyboard handler.
  • Rename Sample demo to Counter.
  • Transfer remaining images to https://github.com/Oblosys/asset-storage.

v1.0.1

1 year ago

Changes

  • Fix a crash when showing cyclic hook values, such as DOM refs.
  • Minor tweaks to the demo styles.
  • Small fixes to tasks for VS Code v1.73.

v1.0.0

1 year ago

Features

  • Trace support for:
    • useCallback
    • useContext
    • useEffect
    • useInsertionEffect
    • useLayoutEffect
    • useMemo
    • useRef
    • useState
  • TracePanel component that shows used hooks and current values for props, state & refs.
  • Interactive TraceLog component that highlights trace origin in corresponding panel when hovering over traces.
  • Support for custom hook labels.
  • The useTracer hook takes an optional showProps function to customize how props appear in the log & trace panels.
  • Hooks that keep track of a value (useContext, useMemo, useRef, and useState) accept an optional show function.
  • Custom trace function to log messages to trace-log.
  • Support for tracing to the browser console.
  • Fully typed.
  • Package contains both ESM & CommonJS modules.