Discover published sets by community

Allows you to add state to functional components. Example: const [count, setCount] = useState(0);

Used to perform side effects in functional components. Example: useEffect(() => { document.title = `You clicked {count} times`;}, [count]);

Gives you access to the data in React Context. Example: const value = useContext(MyContext);

An alternative to useState which accepts a reducer function. Example: const [state, dispatch] = useReducer(reducer, initialState);

Memorizes a callback function. Example: const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

Memorizes the calculated value. Example: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Returns a mutable ref object. Example: const myRef = useRef(initialValue);

Runs synchronously after all DOM mutations. Example: useLayoutEffect(() => { measureLayout(); }, [dependencies]);

Customizes the instance value that is exposed when using ref. Example: useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } }), [inputRef]);

Used to display a label for custom hooks in React DevTools. Example: useDebugValue(value);

Generates a unique and stable identifier. Example: const id = useId();

Helps optimize the rendering of non-urgent updates. Example: const [isPending, startTransition] = useTransition();

Defers the value until after the next render. Example: const deferredValue = useDeferredValue(value);

Subscribes to an external mutable source. Example: const state = useSyncExternalStore(store.subscribe, store.getState);

Used to inject styles into the DOM before layout occurs. Example: useInsertionEffect(() => { const sheet = new CSSStyleSheet(); sheet.replaceSync('* { transition: none; }'); });

Used to access the state from an external, mutable source in a concurrent-safe way. Please note that this hook has been replaced by useSyncExternalStore in React 18.

Returns an object that is stable across server and client rendering, useful for generating unique IDs (deprecated, use useId instead).

Triggers a refresh of cached data if updates are detected (experimental and not a part of the stable API).

Enables stable event callbacks, preventing capture of values, props, and state (experimental in React 18). Example: const stableOnClick = useEvent(() => { console.log('clicked'); });