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