In this article, I'm continuing with the next set of React hooks and patterns that I found crucial when I moved from building small demos to more realistic applications.
These cover side effects, performance optimizations, structured state, and rendering concerns.

---

useEffect – Side Effects, Dependencies, Cleanup, Fetching Data

When I first started with React, I thought everything had to be inside the component render function. But soon I learned that anything like fetching data, setting up timers, or subscribing to external services belongs in side effects.
That's exactly what useEffect is for. It's React's way of saying: run this after rendering.

The three main things I had to master were:

1. Dependencies – controlling when the effect runs.
2. Cleanup – returning a function to clean up subscriptions or timers.
3. Replacing lifecycle methods – componentDidMount, componentDidUpdate, and componentWillUnmount can all be represented with useEffect.

// Basic: run once on mount
useEffect(() => {
  console.log("Mounted");
}, []);

// With dependencies: runs when count changes
useEffect(() => {
  console.log("Count changed");
}, [count]);

// Cleanup: remove listener when unmounted
useEffect(() => {
  const id = setInterval(() => setTime(Date.now()), 1000);
  return () => clearInterval(id);
}, []);

Fetching data is one of the most common use cases:

export function Users() {
  const [users, setUsers] = React.useState([]);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers);
  }, []);

  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

---

useReducer – Structured State Management

At first, I used useState for everything. But when state grew more complex (like forms or multi-step wizards), it became messy.
That's when useReducer became my friend. It brings structured updates similar to Redux, but without extra libraries.

type State = { count: number };
type Action = { type: "inc" } | { type: "dec" };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "inc": return { count: state.count + 1 };
    case "dec": return { count: state.count - 1 };
  }
}

export function Counter() {
  const [state, dispatch] = React.useReducer(reducer, { count: 0 });
  return (
    <div>
      <button onClick={() => dispatch({ type: "dec" })}>-</button>
      {state.count}
      <button onClick={() => dispatch({ type: "inc" })}>+</button>
    </div>
  );
}

Lazy initialization is also powerful when the initial state requires computation:

function init(count: number) {
  return { count };
}

const [state, dispatch] = React.useReducer(reducer, 5, init);

---

useCallback – Stable Functions

I ran into cases where passing inline arrow functions caused child components to re-render unnecessarily.
That's when I learned useCallback: it memoizes functions so they only change when dependencies change.

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

---

memo – Memoized Components

Sometimes, child components kept re-rendering even though props didn't change.
React.memo solved this by memoizing the component itself.

const Child = React.memo(function Child({ value }: { value: number }) {
  console.log("Rendered");
  return <div>{value}</div>;
});

---

useMemo – Memoized Calculations

useMemo is like useCallback, but for values.
It's great for expensive calculations you don't want to redo every render.

const sorted = useMemo(() => {
  return [...items].sort((a, b) => a.name.localeCompare(b.name));
}, [items]);

---

Keys in Lists – Object IDs vs Index

Early on, I just wrote key={i} when mapping lists. But this causes React to re-use DOM nodes incorrectly, leading to flickering and bugs.
Now I always use stable identifiers, like database IDs.

<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>

---

million.js – Faster Rendering

At some point I explored million.js, a library that accelerates React rendering by using a faster virtual DOM.
The integration was straightforward, and in lists with thousands of rows, I noticed a clear performance boost.

import { block } from "million/react";

const FastList = block(function FastList({ items }: { items: string[] }) {
  return (
    <ul>
      {items.map((item) => <li key={item}>{item}</li>)}
    </ul>
  );
});

---

Async/Await in useEffect – Cleaner Code

Originally, I nested then inside useEffect, but it quickly got messy.
Using async/await inside an effect makes the code easier to read.

useEffect(() => {
  let ignore = false;
  async function fetchData() {
    const res = await fetch("/api/data");
    const json = await res.json();
    if (!ignore) setData(json);
  }
  fetchData();
  return () => { ignore = true; };
}, []);

The cleanup with ignore is important to avoid setting state on an unmounted component.

---

useLayoutEffect vs useEffect

One time I tried to measure element size in useEffect, but saw flicker. That's when I discovered useLayoutEffect.
Unlike useEffect, it runs synchronously after DOM mutations but before painting, so you can measure and make adjustments without flicker.

useLayoutEffect(() => {
  const rect = ref.current?.getBoundingClientRect();
  console.log("Size", rect);
}, []);

---

Closing Thoughts

In Part 2, I went deeper into managing side effects, performance, and structured state.
The biggest lessons for me were:

• useEffect taught me to separate rendering from side effects.
• useReducer gave me structure when useState wasn't enough.
• useCallback, useMemo, and memo showed me how to avoid useless re-renders.
• Stable keys are critical for avoiding flicker.
• Libraries like million.js can push performance even further when needed.
• Async/await made my effects cleaner, and useLayoutEffect fixed visual glitches.

This concludes Part 2. In Part 3, I'll explore custom hooks, advanced context patterns, and performance tricks for larger applications.