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