React Hooks Overview

#react

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]); }`

DEV Community