| 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]); } |
Intelligence View
⚡ tsecurity.de Intelligence
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); },…
Reagiere als Erste:r — dein Feedback zählt!