Understand React Hooks the Right Way: From Basics to Bug Prevention & Design Decisions

0. Introduction

React Hooks are a way to manage state and lifecycle without classes (since 16.8).

• Simpler than class syntax
• Easier to reuse logic (custom hooks)
• Easier to test

👉 Goals of this article:

• Beginners: Use useState / useEffect correctly
• Intermediate: Understand render/commit, stale closures, and re-renders caused by function props to make sound design decisions

1. Visualize Render vs. Commit

• Render: React calls your component function to produce virtual DOM.
• Commit: The diff is applied to the real DOM.

👉 The component function is invoked by React itself—internally as part of the lifecycle, not by your code directly.

2. Core Hooks

2-1. useState

const [user, setUser] = useState({ name: "Taro", age: 20 });

// ❌ setUser replaces the whole state
setUser({ age: 21 });
// => { age: 21 } (name is gone)

// ✅ Spread to keep the rest
setUser(prev => ({ ...prev, age: 21 }));

useState — Key Points

• Holds state inside a component
• setState replaces the value (no partial merge)
• Updates are async; prefer the functional updater when you need the latest value
• Use it for data that should be reflected in the UI

2-2. useEffect

useEffect(() => {
  const id = setInterval(() => console.log("tick"), 1000);
  return () => clearInterval(id);
}, []);

useEffect — Key Points

• Runs side effects after render
• Control when it runs with the dependency array
• Return a cleanup function to release resources
• Great for async calls, subscriptions, DOM operations, etc.

2-3. useContext

const ThemeContext = createContext("light");
const theme = useContext(ThemeContext);

useContext — Key Points

• Share values with descendants without prop drilling
• When the value changes, all consumers re-render
• Handy for global settings (theme, auth info, etc.)
• For large-scale state, consider Redux or Zustand

3. Effect Dependencies, Stale Closures, and Solving Them with useRef

What is a stale closure?

Function components create a new function scope on every render.
As a result, callbacks that captured variables at render time may keep reading old values—that’s a stale closure.

❌ Bug caused by a stale closure

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

  function tick() {
    // ❌ 'count' may be stale here
    setCount(count + 1);
  }

  useEffect(() => {
    const id = setInterval(tick, 1000);
    return () => clearInterval(id);
  }, []); // 'tick' not in deps
}

👉 tick keeps referring to the initial count, so it never increments beyond 0.

✅ Avoid it with a functional update

useEffect(() => {
  const id = setInterval(() => {
    setCount(c => c + 1); // ✅ always uses the latest value
  }, 1000);
  return () => clearInterval(id);
}, []);

✅ Avoid it with useRef

function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(0);

  useEffect(() => {
    const id = setInterval(() => {
      countRef.current += 1;
      setCount(countRef.current);
    }, 1000);
    return () => clearInterval(id);
  }, []);
}

useRef — Key Points

• Holds a mutable value in .current
• Updating it does not trigger a re-render
• Also used for DOM element refs
• Prevents stale closures by always reading the latest value
• Great for values not needed in the UI or temporary values

4. useCallback and Re-renders Caused by “Functions Are Objects”

What happens when passing a function to a child?

1. The parent re-renders.
2. The parent’s function definition runs again, creating a new function object.
3. The child sees a new prop reference.
4. The child re-renders.

👉 If the child is heavy, unnecessary re-renders make the UI feel sluggish.

In JS, functions are objects

function a() {}
function b() {}
console.log(a === b); // false

→ A newly created function is a different object each time.

✅ Optimize with useCallback + React.memo

const Child = React.memo(({ onClick }) => {
  console.log("Child render");
  return <button onClick={onClick}>Click</button>;
});

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

  const handleClick = useCallback(() => {
    setCount(c => c + 1);
  }, []);

  return <Child onClick={handleClick} />;
}

useCallback — Key Points

• Memoizes a function so its reference stays stable
• Prevents unnecessary child re-renders when passing callbacks
• Stabilizes functions used inside useEffect dependency arrays
• Works best together with React.memo

5. useEffect × useReducer: Handling Function Dependencies & Multi-step State

Function dependency example

function Child({ onData }) {
  useEffect(() => {
    const id = setInterval(() => {
      onData(new Date().toLocaleTimeString());
    }, 1000);
    return () => clearInterval(id);
  }, [onData]); // include the function dependency
}

👉 In the parent, use useCallback to stabilize onData.

Multi-step transitions with useReducer

const initialState = { status: "idle", data: null, error: null };

function reducer(state, action) {
  switch (action.type) {
    case "FETCH_START":   return { status: "loading", data: null, error: null };
    case "FETCH_SUCCESS": return { status: "success", data: action.payload, error: null };
    case "FETCH_ERROR":   return { status: "error", data: null, error: action.error };
    default:              return state;
  }
}

useReducer — Key Points

• Great for complex, multi-step state transitions
• Name actions to clarify logic
• Often dispatch from inside useEffect
• Ideal for forms, data fetching, step flows
• Frequently combined with function dependencies

6. Custom Hooks

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);

  return width;
}

Custom Hooks — Key Points

• Combine multiple hooks to build reusable logic
• Must be named starting with use
• Extract UI-agnostic logic for reuse
• Perfect for common tasks (window size, fetching, auth checks)

7. Hooks Summary Table

📌 How to choose

• Small features → useState + useEffect
• Global shared values → useContext
• Perf issues from prop functions → useCallback + React.memo
• Complex flows → useReducer
• Reusable logic → Custom hooks