React Hooks Overview

Hook Purpose Basic Usage useState Adds state to function components const [count, setCount] = useState(0); useEffect Performs side effects in function components useEffect(() => { console.log(count); }, [count]); useContext Accesses values from a React context const value = useContext(MyContext); useReducer Manages complex state logic const [state, dispatch] = useReducer(reducer, initialState); useCallback Memoizes a callback function const memoizedFn = useCallback(() => { doSomething(); }, [dep]); useMemo Memoizes a computed value const memoizedValue = useMemo(() => computeExpensiveValue(dep), [dep]); useRef Returns a mutable reference const inputRef = useRef(null); useImperativeHandle Customizes the instance exposed by ref useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() })); useLayoutEffect Runs synchronously after DOM mutations useLayoutEffect(() => { console.log('Layout effect'); }); useDebugValue Adds debug labels to custom hooks useDebugValue(isOnline ? 'Online' : 'Offline'); Custom Hooks Extracts reusable logic into a function function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }

Apr 27, 2025 - 01:56

Hook	Purpose	Basic Usage
`useState`	Adds state to function components	`const [count, setCount] = useState(0);`
`useEffect`	Performs side effects in function components	`useEffect(() => { console.log(count); }, [count]);`
`useContext`	Accesses values from a React context	`const value = useContext(MyContext);`
`useReducer`	Manages complex state logic	`const [state, dispatch] = useReducer(reducer, initialState);`
`useCallback`	Memoizes a callback function	`const memoizedFn = useCallback(() => { doSomething(); }, [dep]);`
`useMemo`	Memoizes a computed value	`const memoizedValue = useMemo(() => computeExpensiveValue(dep), [dep]);`
`useRef`	Returns a mutable reference	`const inputRef = useRef(null);`
`useImperativeHandle`	Customizes the instance exposed by `ref`	`useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }));`
`useLayoutEffect`	Runs synchronously after DOM mutations	`useLayoutEffect(() => { console.log('Layout effect'); });`
`useDebugValue`	Adds debug labels to custom hooks	`useDebugValue(isOnline ? 'Online' : 'Offline');`
Custom Hooks	Extracts reusable logic into a function	`function useFetch(url) { useEffect(() => { fetch(url); }, [url]); }`