React Study Portal

Use useCallback to memoize functions, useMemo to memoize values. useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

useEffect runs after paint (asynchronous), useLayoutEffect runs before paint (synchronous). Use useLayoutEffect when you need to measure/mutate DOM before browser paints.

Use useReducer when you have complex state logic with multiple sub-values, when next state depends on previous state, or when you want to optimize performance by passing dispatch down instead of callbacks.

Create an async function inside the effect and call it, or use .then(). Never make the effect callback itself async. Always handle cleanup for race conditions.

Missing dependency array runs effect after every render. Including objects/arrays created during render as dependencies causes new references every render. Use useMemo or move object creation inside the effect.

When you have reusable stateful logic used in multiple components, complex logic that clutters components, or when you want to encapsulate related hooks together.

No, hooks must be called in the same order every render. Dynamic hook calls break React's internal tracking. Create separate components instead.

Return a cleanup function from the effect. It runs before the effect re-runs and when component unmounts.

Store mutable values that don't trigger re-renders when changed, access DOM elements, keep instance variables between renders, and track previous values.

Use React.memo for components, useCallback for functions, useMemo for expensive calculations, split state to prevent unnecessary updates, and lift state only when needed.