react-use

To prevent useStateValidator from triggering automatic state updates on every render (which is necessary for async operations), use the setValidity callback provided as the second argument to your validator function. This allows you to control exactly when the validity state is updated, typically after an asynchronous task completes.

// Conceptual pattern for async validation
const asyncValidator = async (state, setValidity) => {
  // 1. Perform async check
  const result = await checkServer(state);
  
  // 2. Manually update validity once finished
  // This prevents the hook from updating 'isValid' prematurely
  setValidity([result, 'metadata']);
  
  // Return the current state to satisfy the signature
  return [null, 'pending'];
};

The useHarmonicIntervalFn hook functions similarly to the useInterval hook, but with a key difference: it triggers all registered effects with the same delay at the exact same time. This is specifically useful for creating synchronized UI elements, such as multiple ticking clocks on a page that need to re-render their counters simultaneously to prevent visual drift.

// Example use case: synchronized clocks
useHarmonicIntervalFn(() => {
  // This effect will trigger in sync with other harmonic intervals
  setSeconds(s => s + 1);
}, 1000);

Choose between the two hooks based on the scope of your drop detection:

• useDrop: Tracks events for the whole page. Use this for global interactions where dropping anywhere on the document should trigger an action.
• useDropArea: Tracks drop events for a specific element. Use this when you want to define a specific 'drop zone' (e.g., a file upload box) by spreading the returned bond object onto that element.

When using the useSet hook, you can choose between two ways to empty or revert the state:

1. reset(): Returns the Set to the initial value that was passed to useSet during the initial render.
2. clear(): Completely empties the Set, leaving it with no elements regardless of the initial value.

createReducerContext is a factory for React context hooks that mimics the behavior of React's useReducer hook, but with a key difference: the state is shared among all components wrapped within the returned Provider. This pattern is useful for managing global or shared state that any component in a specific subtree can read and update via a dispatch function.

import { createReducerContext } from 'react-use';

const reducer = (state, action) => {
  // ... reducer logic
};

const [useSharedState, SharedStateProvider] = createReducerContext(reducer, initialState);

When using standard useState, if you trigger an asynchronous operation (like setTimeout) that references the state variable, that variable is captured from the render cycle in which the function was created. If the state changes before the async operation completes, the operation will use the old (stale) value.

useGetSet solves this by providing a get() function that always retrieves the current state value from the latest render, ensuring asynchronous updates are based on the most recent data.

// WRONG: Using useState with async operations captures stale 'cnt'
const DemoWrong = () => {
  const [cnt, set] = useState(0);
  const onClick = () => {
    setTimeout(() => {
      set(cnt + 1);
    }, 1_000);
  };

  return (
    <button onClick={onClick}>Clicked: {cnt}</button>
  );
};

The useSessionStorage hook is a React side-effect hook that manages a single key within the browser's sessionStorage. It provides a state-like interface ([value, setValue]) where updates are automatically persisted to sessionStorage.

import {useSessionStorage} from 'react-use';

const Demo = () => {
  // Manages 'my-key' with an initial value of 'foo'
  const [value, setValue] = useSessionStorage('my-key', 'foo');

  return (
    <div>
      <div>Value: {value}</div>
      <button onClick={() => setValue('bar')}>bar</button>
      <button onClick={() => setValue('baz')}>baz</button>
    </div>
  );
};