useTimeout

Logs property changes to the console whenever the component updates.

Warning

This hook should only be used during development. It performs shallow comparisons on every render, which can impact performance if left in production code.

Note

To see changes in the console, ensure you pass an object where keys represent the prop or state names you wish to track.

Installation

bash

Description

A development-only debugging utility. When a component re-renders, this hook compares the current values of a provided object (usually props or state) against the previous values and logs exactly what changed to the console.

Parameters

NameTypeDescription
valueRecord<string, unknown>An object containing the props or state variables to track. Required.
namestringA label to identify the component in console logs. Default: 'Component'.

Demo

Trace Updates

Source code

tsx