useTrace

Tracing Library to understand state changes

This library is built to help understanding state changes triggering rerenders. The gihub project contains an example project using the library.

Output

Props is any props you pass to the hook.

Usage

Initialization

Initialize the trace in the first line of the component.

function App() {
const trace = useTrace("App");

Optionally pass the props:

function MyComponent({hello, world}) {
const trace = useTrace("MyComponent", {hello, world});

Alt:

const MyComponent = (props: MyComponentProps) => {
const trace = useTrace("MyComponent", props);

The trace will let you know what the initial props is, and always when the props changes.

Internal state

Log the internal state changes using the state function. Once per component/function.

trace.state({ value1, object1, functionA });

Whenever one or many of the fields change, you will get notified about the previous and current value.

Exit

On all exit points you need to call exit.

trace.exit();

You can also add an optional log statement.

trace.exit("Rendering loading spinner");

Log statements

trace.log(
  "This statement is indented at the current function level, and bold by default"
);

The function signature is identical to console.log.