@technobuddha > react-hooks > React > Hooks

Function: useLocal()

function useLocal<T>(initialState: T | () => T): [T, (set: T | (prev: T) => T) => void];

Defined in: use-local.ts:29

Provides a mutable value that persists for the lifetime of the component, similar to useRef, but with a convenient setter function like useState. Updating the value does not cause a re-render.

Useful for storing local, non-UI state such as timers, cached values, or other data that should persist across renders but not trigger updates to the UI.

Type Parameters

Type Parameter
T

Parameters

Parameter	Type	Description
initialState	T | () => T	Initial value or a function returning the initial value.

Returns

[T, (set: T | (prev: T) => T) => void]

[value, setter] tuple. The setter updates the value but does not re-render the component.

Example

function Timer() {
  const [startTime, setStartTime] = useLocal(() => Date.now());
  // This value will persist across renders, but updating it will not re-render the component.
  return (
    <button onClick={() => setStartTime(Date.now())}>
      Reset Timer
    </button>
  );
}