Rules of hooks and custom hooks

Model answer. The two rules:

1. Call hooks only at the top level of a component or custom hook: never inside conditions, loops, or nested functions, and never after an early return.
2. Call hooks only from React functions (components or custom hooks), not from ordinary functions or classes.

Why: React does not know hooks by name. It stores each component's hook data in a list and matches them by call order on every render. If a hook runs conditionally, the order shifts and state gets attached to the wrong hook. The eslint-plugin-react-hooks rules enforce this.

A custom hook is a function whose name starts with use and which calls other hooks. It shares stateful logic, not state: each component that calls it gets its own independent state.

function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

function CollegeSearch() {
  const [query, setQuery] = useState('');
  const q = useDebouncedValue(query);       // fetch with q, not on every keystroke
}