Skip to main content
100%

A simple logging hook for React

✓ Published0🌍 Public
Aabonello
Last edited Apr 21, 2021
Created on Dec 30, 2021

This example shows a React logging hook that provides memoized console methods for component-level debugging. It exposes `useLogger`, `useDebugger`, and `useError` hooks, each returning a bound console function with a prefix. The code uses `useMemo` to cache the logger instances, and stores references to `console.log`, `console.error`, and `console.debug` to avoid React.DOM overriding them. The `logger` function returns a bound function via `Function.prototype.bind`, allowing services like Redux/Thunk to use the same logging utility. No data source or rendering is involved.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 56b9c00fb86d733bf6f97d3a27ecb5fd

This example shows a Redux middleware-style logger that visualizes state changes in a React or Redux application. The code exports a `logger` function that wraps a reducer and, for each dispatched action, logs a collapsible group with the action type, the previous state, the action object, and the next state, using `console.group`, `console.log`, and styled `%c` format specifiers with color codes for readability. It relies on the Redux reducer pattern, where `currentState` is implicitly captured, and returns the next state unchanged after logging. No external visualization library is used; the rendering approach is plain browser console output.

Aackuser
70% match
Loading thumbnail…

React cheatsheet

This animated React cheatsheet presents reusable code patterns for hooks, state management, and component composition. The example uses React hooks including `useState`, `useEffect`, `useRef`, `useReducer`, and `useContext`, alongside custom hooks like `useTimeout` and higher-order components. It demonstrates conditional JSX rendering, callback-based state updates, and the containment pattern via props slots. The animation shows code snippets transitioning between sections, sourced from a gist by abernier.

Aabernier
65% match
Loading thumbnail…

A hook that persists useState() to localStorage.

This example demonstrates a custom React hook that synchronizes a component’s state with the browser’s localStorage, enabling persistent data across page reloads. The hook, `useStateStorage`, initializes state with a provided default value and reads any stored JSON from localStorage on mount, updating the state if valid. It exposes a setter function that writes both the new state and its JSON-serialized form to localStorage. The code uses React’s `useState`, `useEffect`, and `useCallback` APIs to manage lifecycle and memoization, while leveraging `localStorage.getItem` and `localStorage.setItem` for storage operations.

Aabonello
64% match
Loading thumbnail…

React HOC (Higher Order Component) Example

This example demonstrates three progressively concise implementations of a React Higher Order Component (HOC), a pattern where a function accepts a component and returns a new wrapped component. The code shows both class-based and functional HOCs that render a passed component inside a `<div className="debug">` for debugging purposes. The functional versions use React component syntax with implicit returns, showing how the helper function `DebugComponent` can be defined with arrow functions. The examples highlight how React components can be composed programmatically, with the final invocation `DebugComponent(MyComponent)` applying the wrapper to any target component.

RRestuta
64% match
Loading thumbnail…

Hook that stores a state value as a JSON string to prevent render updates when an object value is mutated but doesn't change.

This example demonstrates a React hook that stores a state value as a JSON string, preventing unnecessary render updates when an object is mutated but its content remains unchanged. It shows how `useState`, `useMemo`, and `useCallback` work together to serialize the initial state via `JSON.stringify`, parse it back with `JSON.parse` inside a memoized value, and provide a setter that stringifies the next value before updating state. The hook uses TypeScript generics for type safety, and the behavior is visible in the code, though it does not display any data visualization or rendering logic.

Aabonello
64% match
Loading thumbnail…

Hook that records the history of state changes as an Array buffer upto a certain length.

A React hook records state changes as an array buffer capped at a specified length. The hook initializes with a single state value and appends each new update, trimming older entries to maintain the size limit via array slicing. It uses React’s `useState` to store the history and `useCallback` to memoize the update function. This example demonstrates a generic TypeScript utility for tracking state evolution, with no rendering or visualization logic included.

Aabonello
63% match
Loading thumbnail…

A interval hook you can use in your ReactJS projects

This example demonstrates a reusable React hook, `useInterval`, that manages a timed callback for animations or periodic updates in a component. It accepts a callback function, a delay in milliseconds, and a dependency list, ensuring the interval resets whenever the callback or dependencies change. The hook relies on React’s `useEffect` and `useMemo` APIs to set up and clear a `setInterval` timer, returning a cleanup function to prevent memory leaks. The code shows a concise pattern for integrating interval-based logic into React projects, suitable for driving data-visualization updates or animations without external libraries.

Aabonello
63% match
Loading thumbnail…

Hook that adds a click listener outside of an element.

This example demonstrates a React hook that detects clicks outside a referenced element. It returns a ref to attach to a component, and when a click event occurs, it checks whether the event target is contained within that element. If not, it invokes a callback. The hook uses React’s `useRef`, `useCallback`, and `useEffect` to manage the reference and listener, adding a document-level click listener and cleaning it up on unmount. The callback and its dependency list are passed as arguments, allowing flexible, memoized behavior.

Aabonello
62% match