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