📰 Reading: Tech Articles & Blog Posts

Title: Why React Re-renders (And How to Stop Unnecessary Ones)

If you've been working with React for a while, you've probably noticed that components
sometimes re-render more often than you'd expect. Understanding why this happens is
crucial to building performant applications.

React re-renders a component when one of three things happens:
1. Its own state changes (via useState or useReducer)
2. Its parent component re-renders
3. A context it subscribes to changes (via useContext)

The third trigger surprises most developers. It means that even if none of your
component's props changed, it will still re-render if the parent does — unless you
wrap it in React.memo().

Here's a common pitfall:

  function ParentComponent() {
    const [count, setCount] = useState(0);
    const handleClick = () => setCount(c => c + 1);
    return (
      <>
        <button onClick={handleClick}>Increment</button>
        <ExpensiveChild onAction={handleClick} />
      </>
    );
  }

In this example, every time count changes, ParentComponent re-renders, which creates
a NEW handleClick function reference. Even if you wrap ExpensiveChild in React.memo(),
it will still re-render because the prop reference changed.

The fix: wrap handleClick in useCallback() so its reference remains stable across renders.

Key takeaway: React.memo() alone is not enough when passing callbacks as props.
You almost always need to pair it with useCallback() (and sometimes useMemo() for
computed values).

Title: Why React Re-renders (And How to Stop Unnecessary Ones)

If you've been working with React for a while, you've probably noticed that components
sometimes re-render more often than you'd expect. Understanding why this happens is
crucial to building performant applications.

React re-renders a component when one of three things happens:
1. Its own state changes (via useState or useReducer)
2. Its parent component re-renders
3. A context it subscribes to changes (via useContext)

The third trigger surprises most developers. It means that even if none of your
component's props changed, it will still re-render if the parent does — unless you
wrap it in React.memo().

Here's a common pitfall:

  function ParentComponent() {
    const [count, setCount] = useState(0);
    const handleClick = () => setCount(c => c + 1);
    return (
      <>
        <button onClick={handleClick}>Increment</button>
        <ExpensiveChild onAction={handleClick} />
      </>
    );
  }

In this example, every time count changes, ParentComponent re-renders, which creates
a NEW handleClick function reference. Even if you wrap ExpensiveChild in React.memo(),
it will still re-render because the prop reference changed.

The fix: wrap handleClick in useCallback() so its reference remains stable across renders.

Key takeaway: React.memo() alone is not enough when passing callbacks as props.
You almost always need to pair it with useCallback() (and sometimes useMemo() for
computed values).

CSS Grid vs. Flexbox: When to Use Which

Both CSS Grid and Flexbox are layout systems, but they solve different problems.
Understanding the distinction will save you hours of debugging.

Flexbox is one-dimensional: it distributes items along a single axis (either row or
column). It's the right tool when you want items to flow and wrap naturally:
  - Navigation bars
  - Button groups
  - Card content (icon + text side by side)

Grid is two-dimensional: it positions items in both rows and columns simultaneously.
Use it when you're designing the macro layout of a page:
  - Full-page layouts (header, sidebar, main, footer)
  - Photo galleries
  - Dashboard panels

A practical rule of thumb: if you're thinking about rows AND columns at the same time,
use Grid. If you're thinking about a list of items in one direction, use Flexbox.

They also compose well together — it's common to use Grid for the outer page structure
and Flexbox for the content inside individual grid cells.

Common mistake: reaching for Grid for everything because it feels more powerful.
Flexbox is simpler for one-dimensional flows and results in less code.

Browser support: both are at 97%+ globally as of 2024. You no longer need fallbacks
for modern browser targets.