React: What React hooks do you know?

Hooks are functions that allow "connecting" React capabilities to functional components (without classes). Introduced in React 16.8.

Simple analogy: Imagine your component is a robot. Hooks are modules you connect to the robot:

• useState — battery (remembers data).
• useEffect — motion detector (reacts to changes).
• useContext — walkie-talkie (connection to base).
• useRef — camera (looks at DOM).

Main hooks:

1. useState — "Memory" Allows storing and changing data that updates the interface.

1const [count, setCount] = useState(0);  // Initial value: 0
2return <button onClick={() => setCount(count + 1)}>{count}</button>;

Important detail: setState batches updates. Multiple setCount calls in the same event handler are combined into one re-render for performance.

2. useEffect — "Reaction to changes" Executes code after render (data loading, subscriptions, timers).

1useEffect(() => {
2    fetch('/api/data').then(res => setData(res));
3    return () => cleanup();  // Cleanup function
4}, []);  // Empty array — execute once on load

Dependency array rules:

• [] — runs once on mount.
• [dep1, dep2] — runs when any dependency changes.
• No array — runs after EVERY render (usually a mistake).

3. useContext — "Access to shared data" Reads value from Context (theme, language, user).

1const theme = useContext(ThemeContext);  // Got the theme

4. useRef — "Reference to DOM" Allows access to a DOM element (for example, to focus on input).

1const inputRef = useRef();
2<input ref={inputRef} />
3inputRef.current.focus();  // Focus on input

5. useMemo — "Caching calculations" Remembers the result of a complex calculation to avoid recalculating unnecessarily.

1const sortedList = useMemo(() => {
2    return list.sort((a, b) => a - b);
3}, [list]);  // Recalculate only if list changed

6. useCallback — "Stable function" Remembers a function so it is not recreated on every render.

1const handleClick = useCallback(() => {
2    doSomething();
3}, []);

7. useReducer — "Complex state" Like useState, but for complex update logic (like Redux).

1const [state, dispatch] = useReducer(reducer, initialState);
2dispatch({ type: "increment" });

8. useLayoutEffect — "Synchronous effect" Like useEffect, but executes BEFORE the browser shows the page.

Why it matters:

• Code reuse — hooks let you extract stateful logic into reusable functions without changing component hierarchy.
• Simpler components — no need for class syntax, this binding, or lifecycle method complexity.
• Better composition — multiple hooks in one component, each handling a different concern.

Common mistakes:

• Calling hooks inside conditions, loops, or nested functions — hooks must be at the top level.
• Calling hooks inside regular functions — only call hooks inside React components or custom hooks.
• Forgetting the dependency array in useEffect, or including too many/too few dependencies.

Rules of Hooks:

1. Only call hooks at the top level of your function.
2. Only call hooks from React functions (components or custom hooks).
3. Custom hooks must start with the word "use".