Props and state

React Hooks are functions that let function components use React features such as state, effects, references, context, and other capabilities. Before Hooks were introduced, state and lifecycle behavior were commonly implemented with class components. Hooks made it possible to use these capabilities directly inside function components.

1 Why Hooks?

Hooks were introduced to make it easier to reuse stateful logic and keep related behavior together. With class components, related logic could be spread across lifecycle methods such as mounting, updating, and unmounting. Hooks allow related logic to be organized around the purpose of that behavior.

For example, logic for subscribing to an external service, cleaning up that subscription, and responding to dependency changes can be kept together inside an effect.

2 Common Built-in Hooks

3 Basic Hook Example

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Count: {count}
        </button>
    );
}

The component is a normal function, but useState gives it React-managed state.

4 Rules of Hooks

Hooks have important rules. The rules allow React to associate Hook calls with the correct component state across renders.

Rule 1: Only Call Hooks at the Top Level

Hooks should not be called inside loops, conditions, nested functions, or other control-flow branches.

// Incorrect
if (isLoggedIn) {
    const [user, setUser] = useState(null);
}

The correct approach is to call the Hook unconditionally and place the condition around the behavior that uses the state.

const [user, setUser] = useState(null);

if (!isLoggedIn) {
    return <p>Please log in.</p>;
}

Rule 2: Only Call Hooks from React Functions

Hooks should be called from React function components or custom Hooks. They should not be called from ordinary JavaScript functions that are not React components or Hooks.

5 Why Hook Order Matters

React relies on the consistent order of Hook calls between renders. If Hooks were conditionally called, the position of one Hook could change between renders and React would no longer be able to associate state correctly.

flowchart TD
A[Component Render] --> B[Hook 1]
B --> C[Hook 2]
C --> D[Hook 3]
D --> E[React Associates Hook State By Order]
E --> F[Next Render Uses Same Hook Order]

6 Custom Hooks

A custom Hook is a reusable JavaScript function whose name normally starts with use and which can call other Hooks.

function useOnlineStatus() {
    const [online, setOnline] = useState(navigator.onLine);

    // Additional effect logic can be added here.

    return online;
}

Custom Hooks do not share the same state instance between components. Each component calling the custom Hook gets its own Hook state unless the Hook explicitly connects to shared external state or context.

7 Hooks and Rendering

Hooks are not a replacement for rendering. They provide mechanisms for state, effects, references, memoization, and other React behavior that supports rendering.

A useful mental model is:

flowchart LR
A[Component Function] --> B[Hooks Read State Or Resources]
B --> C[Render UI]
C --> D[User Interaction]
D --> E[State Update]
E --> A

8 Common Mistakes

• Calling a Hook inside an if statement.
• Calling a Hook inside a loop.
• Calling Hooks from ordinary utility functions.
• Creating custom Hooks that do not start with use.
• Using a Hook merely because it exists instead of identifying the actual problem it solves.
• Using memoization Hooks without understanding their cost and purpose.

9 Interview Questions

1. What are React Hooks?
2. Why were Hooks introduced?
3. What are the Rules of Hooks?
4. Why can't Hooks be called conditionally?
5. Can Hooks be called inside loops?
6. What is a custom Hook?
7. Does a custom Hook share state between components?
8. What is the difference between a Hook and a normal JavaScript function?
9. What happens if Hook order changes between renders?
10. When should you create a custom Hook?

10 Key Takeaways

• Hooks let function components use React capabilities.
• Hooks must be called consistently at the top level.
• Hooks should be called from React components or custom Hooks.
• Custom Hooks are useful for reusing stateful behavior.
• Hook order must remain consistent between renders.

Conclusion

Hooks are central to modern React development. The most important foundation is understanding why Hooks exist and why their rules are strict. Once this is clear, individual Hooks such as useState, useEffect, useRef, useMemo, and useCallback become much easier to understand.