React Hooks: Top Interview Questions

Rules of Hooks

1. Only call hooks at the top level (not in loops/conditions)
2. Only call hooks from React functions (components or custom hooks)

Core Hooks Cheat Sheet

useState

const [state, setState] = useState(initialValue);
// Functional updates: setState(prev => prev + 1)

useEffect

useEffect(() => {
  // side effect
  return () => { /* cleanup */ };
}, [dependencies]);

useRef

Persists value across renders without causing re-render. Also for DOM refs.

Interview Questions

Q: What happens if you omit the dependency array?

Effect runs after every render.

Q: useMemo vs useCallback?

• useMemo — memoizes a computed value
• useCallback — memoizes a function reference

Q: Implement useDebounce hook

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

Q: Why did React introduce hooks?

Reuse stateful logic without HOC/render prop complexity, simpler components, better code splitting.