React Hooks
Using React Hooks in functional components
useState
const [count, setCount] = useState(0); # state hook
setCount(count + 1); # update state
setCount(prev => prev + 1); # functional update
useEffect
useEffect(() => { # side effects
// runs after render
}, []); # empty array = run once
useEffect(() => {
// runs when count changes
}, [count]); # dependency array
useEffect Cleanup
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => { # cleanup function
clearInterval(timer);
};
}, []);
useContext
const value = useContext(MyContext); # consume context
useRef
const inputRef = useRef(null); # create ref
<input ref={inputRef} /> # attach ref
inputRef.current.focus(); # access DOM element
useMemo and useCallback
const result = useMemo(() => compute(a, b), [a, b]); # memoize value
const handleClick = useCallback(() => {}, [deps]); # memoize function