React Hooks Cheatsheet
Complete reference for React hooks: state, effects, context, performance optimization.
| Hook | Description | Syntax | Example | Category |
|---|---|---|---|---|
| useState() | Add state to functional component | const [state, setState] = useState(initialValue) | const [count, setCount] = useState(0) | State |
| useEffect() | Handle side effects | useEffect(() => { ... }, [deps]) | useEffect(() => { document.title = "App" }, []) | Side Effects |
| useContext() | Access context value | const value = useContext(ThemeContext) | const { theme } = useContext(ThemeContext) | Context |
| useReducer() | Complex state management | const [state, dispatch] = useReducer(reducer, init) | const [state, dispatch] = useReducer(reducer, { count: 0 }) | State |
| useCallback() | Memoize callback function | const memoizedCallback = useCallback(callback, [deps]) | const handleClick = useCallback(() => { ... }, [count]) | Performance |
| useMemo() | Memoize expensive computation | const value = useMemo(() => computation(), [deps]) | const sum = useMemo(() => array.reduce((a,b) => a+b), [array]) | Performance |
| useRef() | Create mutable ref | const ref = useRef(initialValue) | const inputRef = useRef(null) | Refs |
| useLayoutEffect() | Like useEffect but synchronous | useLayoutEffect(() => { ... }, [deps]) | useLayoutEffect(() => { console.log("Layout") }, []) | Side Effects |
| useImperativeHandle() | Customize ref exposure | useImperativeHandle(ref, () => ({ ... })) | useImperativeHandle(ref, () => ({ focus })) | Refs |
| useDebugValue() | Add label in React DevTools | useDebugValue(value) | useDebugValue(theme === "dark" ? "🌙" : "☀️") | Custom |