Skip to main content
100%

A hook that persists useState() to localStorage.

✓ Published0🌍 Public
Aabonello
Last edited Jun 24, 2021
Created on Dec 30, 2021

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.

AI-generated description

Similar vizzes

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
77% match
Loading thumbnail…

Redux + localStorage

This example shows how to persist a Redux store in the browser’s localStorage by syncing state changes through a custom module. The code defines a reducer that handles `SET` and `REMOVE` actions, calling `serialize` to write the updated Immutable.js collection to localStorage after each mutation. On initialization, `deserialize` reads the stored JSON and hydrates the state via `Immutable.Map`. Access to stored values uses memoized `reselect` selectors, while action creators `set` and `remove` trigger updates. The implementation relies on Redux’s reducer/action pattern and the browser’s `localStorage` API.

RRestuta
69% match
Loading thumbnail…

Hook that increments a counter every time useState() is changed.

This example demonstrates a React hook that tracks how many times a component’s state value is updated. The hook, `useStateCount`, returns both the current value and an incrementing counter that increases each time `setValue` is called. It uses React’s `useState` to store a tuple of `[count, value]` and `useCallback` to memoize the update function, depending on the current count. The code is written in TypeScript and shows a pattern for monitoring state changes without external libraries, relying solely on React’s built-in hooks.

Aabonello
67% 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
66% match
Loading thumbnail…

Hook that emits the previous and current values of useState()

This example demonstrates a React hook that tracks both the previous and current values of a state variable, returning them as a pair for comparison or animation. The `useStatePair` hook initializes with an undefined previous value and the provided initial state, then uses a `setPair` callback to update the tuple whenever `setValue` is called. It relies on React’s `useState` and `useCallback` APIs to manage the state pair and memoize the update function, ensuring stable references. The code shows a generic pattern for observing state transitions without additional libraries.

Aabonello
66% match
Loading thumbnail…

Hook that reads/writes #CSS variables. Turns a CSS variable into a useState() hook for your web components and lets you change them at run-time.

This example demonstrates a React hook that bridges CSS variables and component state, allowing developers to read and update a CSS custom property at run-time. It shows how a single value can be synchronized between a React component’s state and the document’s stylesheet, enabling dynamic theming or style changes without a separate state management system. The `useCSSVariable` hook initializes its state by reading the variable via `window.getComputedStyle` and `document.documentElement`, then updates both the React state and the CSS property using `setProperty`. It relies on React’s `useState` and `useCallback` APIs, and returns a tuple similar to `useState` for easy integration.

Aabonello
65% match
Loading thumbnail…

Hook that debounces useState() changes.

This React hook demonstrates how to debounce state updates from `useState` by wrapping the setter in a custom `useStateDebounce` function. It uses `useCallback`, `useRef`, and `useEffect` to manage a `window.setTimeout` and `window.clearTimeout` pair, delaying the `setState` call by a specified `ms` interval. The hook accepts an initial state value and returns the debounced state and setter, preventing rapid re-renders from frequent input changes. The example is implemented as a TypeScript `.tsx` file, showing the logic in isolation without external data sources or visualization libraries.

Aabonello
65% match
Loading thumbnail…

A simple logging hook for React

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.

Aabonello
64% match