Forem: Ravali Peddi

Why Your React Keyed Lists Still Re-render Unnecessarily

Ravali Peddi — Sun, 02 Mar 2025 08:14:30 +0000

Understanding React's Reconciliation & Keyed Lists

React optimizes UI updates through a process called reconciliation, where it efficiently updates the DOM based on state changes. One of the most well-known optimizations is using keys in lists to help React identify which items have changed, been added, or removed.

However, many developers assume that adding a unique key to list items completely prevents unnecessary re-renders. In reality, React may still re-render list items even when their keys remain stable. Let’s dive into why this happens and how to fix it.

1. When Do Keyed Lists Re-render Unnecessarily?

Even with correct keys, React can still trigger unnecessary re-renders due to:

(a) Parent Component Re-renders the List

If the parent component re-renders, React will re-evaluate all child components, including list items, even if their keys have not changed.

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
};

In this case, if ListComponent re-renders, all ListItem components will also re-render, even if their props haven’t changed.

Fix: Memoization

Wrap the ListItem component in React.memo to prevent unnecessary re-renders:

const ListItem = React.memo(({ item }) => {
  console.log("Rendering:", item.id);
  return <li>{item.name}</li>;
});

Now, ListItem will only re-render when its item prop actually changes.

(b) New Array Instances on Every Render

If the list is derived from a prop or state that gets re-created on every render, React will treat it as a new list, even if the items haven't changed.

const App = () => {
  const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }];
  return <ListComponent items={items} />;
};

Even though the items array looks the same, it is a new array on every render.

Fix: Use `useMemo`

Memoizing the list prevents React from treating it as a new array:

const App = () => {
  const items = useMemo(() => [
    { id: 1, name: "Item 1" },
    { id: 2, name: "Item 2" }
  ], []);
  return <ListComponent items={items} />;
};

Now, React will recognize items as the same reference across renders, preventing unnecessary list updates.

(c) Inline Function Props Causing Re-renders

If an inline function is passed as a prop to a list item, it creates a new function on every render, causing child components to re-render unnecessarily.

const ListComponent = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} onClick={() => console.log(item.id)} />
      ))}
    </ul>
  );
};

Since a new onClick function is created on every render, ListItem will re-render even if item remains unchanged.

Fix: Use `useCallback`

Wrap the function in useCallback to maintain a stable reference:

const ListComponent = ({ items }) => {
  const handleClick = useCallback((id) => console.log(id), []);

  return (
    <ul>
      {items.map((item) => (
        <ListItem key={item.id} item={item} onClick={() => handleClick(item.id)} />
      ))}
    </ul>
  );
};

Now, the onClick function reference remains the same, preventing unnecessary re-renders.

2. When Keyed Lists Do Need to Re-render

There are scenarios where React correctly re-renders list items:

Item properties change: If an item’s props change, React must re-render it.
List order changes: If items are re-ordered, React updates the DOM accordingly.
Items are added or removed: React efficiently updates only the affected items.

These behaviors are expected and correct—but unnecessary re-renders due to avoidable mistakes should be optimized.

3. Summary & Best Practices

✅ Use React.memo to prevent re-renders of list items when props don’t change.
✅ Use useMemo to avoid unnecessary re-creations of lists.
✅ Use useCallback for event handlers to maintain stable function references.
✅ Ensure keys are unique and stable to help React track list items correctly.

By following these best practices, you can drastically improve performance in your React applications by reducing unnecessary re-renders in keyed lists.

How React Batches State Updates (And When It Doesn’t)

Ravali Peddi — Tue, 25 Feb 2025 07:52:40 +0000

Understanding React's State Batching Mechanism

State batching is an optimization in React that reduces the number of re-renders by grouping multiple state updates into a single render cycle. React 18 introduced automatic batching, which significantly enhances performance. However, there are scenarios where React doesn’t batch updates, and understanding these cases is crucial for writing efficient React applications.

1. What is State Batching?

State batching allows React to group multiple state updates together and commit them in one render pass. This avoids unnecessary re-renders and improves performance.

Example of Batching in React 17 and Earlier

Prior to React 18, batching was only done inside event handlers:

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Initial');

  const handleClick = () => {
    setCount((c) => c + 1);
    setText('Updated');
    // Only one re-render occurs because React batches state updates in event handlers
  };

  return <button onClick={handleClick}>{count} - {text}</button>;
};

However, outside of event handlers (e.g., inside setTimeout, Promises, or native event listeners), state updates were not batched:

setTimeout(() => {
  setCount((c) => c + 1);
  setText('Updated');
  // Two re-renders occur in React 17
}, 1000);

2. React 18's Automatic Batching

React 18 expands batching to cover all asynchronous updates (timeouts, promises, async functions, native event listeners, etc.).

Example: Batching in Asynchronous Code in React 18

import { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('Initial');

  const handleAsyncUpdate = () => {
    setTimeout(() => {
      setCount((c) => c + 1);
      setText('Updated');
      // Single re-render in React 18 (batched)
    }, 1000);
  };

  return <button onClick={handleAsyncUpdate}>{count} - {text}</button>;
};

In React 18, these updates are now batched, preventing unnecessary re-renders.

3. When React Does NOT Batch Updates

Despite the improvements, React still doesn’t batch in some cases:

(a) Updates inside `await` calls

React stops batching once an await is encountered in an async function:

const handleAsync = async () => {
  setCount((c) => c + 1);
  await new Promise((resolve) => setTimeout(resolve, 1000));
  setText('Updated'); // This triggers a separate re-render
};

Because React cannot track execution across await, the second update happens in a new render cycle.

(b) Manually Forcing a Re-render

Calling flushSync from react-dom forces updates to happen immediately, bypassing batching:

import { flushSync } from 'react-dom';

const handleImmediateUpdate = () => {
  flushSync(() => setCount((c) => c + 1));
  flushSync(() => setText('Updated'));
  // Two separate renders occur
};

Use flushSync only when necessary, as it can degrade performance if overused.

4. Common Pitfalls and Misconceptions

1. Assuming `useState` Updates Are Always Synchronous

A common mistake is assuming that state updates are applied immediately. React schedules updates and batches them efficiently, meaning state might not reflect changes right away:

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

const handleClick = () => {
  setCount(count + 1);
  console.log(count); // Might log 0, not 1, due to batching
};

To always get the latest state, use the function form of setState:

setCount((prev) => prev + 1);

2. Using `flushSync` Incorrectly

Some developers misuse flushSync to ensure immediate state updates. However, doing so unnecessarily can hurt performance by forcing React to flush updates synchronously:

const handleClick = () => {
  flushSync(() => setCount((c) => c + 1));
  flushSync(() => setText('Updated'));
  // Avoid this unless absolutely necessary
};

Instead, rely on batching unless there's a strict UI requirement for immediate updates.

5. Summary & Best Practices

React batches state updates by default in event handlers and async operations (React 18+).
React does NOT batch updates across await calls.
Use flushSync cautiously when immediate updates are required.
Leverage batching to minimize unnecessary re-renders and improve performance.
Be aware of state updates being asynchronous and use functional updates when necessary.

Understanding these nuances helps in writing optimized React applications with predictable rendering behavior.

Why React Re-renders More Than Expected

Ravali Peddi — Mon, 24 Feb 2025 07:31:15 +0000

Understanding React’s Reconciliation and Re-rendering Behavior

React’s rendering process can sometimes feel unpredictable. You might expect a component to re-render only when necessary, yet it updates more frequently than intended. Let’s break down why this happens and how to prevent unnecessary re-renders.

1. Re-renders Happen When State or Props Change

React components re-render when:

State changes via useState or useReducer.
Props change, even if the new value is the same as the previous one.
Parent re-renders, causing children to re-render as well.

Example: Unexpected re-render due to reference changes

const App = () => {
  const [count, setCount] = React.useState(0);
  const data = { value: 42 }; // New object created on each render

  return <Child data={data} />;
};

Here, data is recreated on every render, causing Child to re-render even if count remains the same.

2. Functions as Props Cause Unnecessary Re-renders

Passing functions as props can lead to excessive re-renders because functions are recreated on every render.

Fix: Use `useCallback`

const App = () => {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(() => setCount(c => c + 1), []);

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

useCallback ensures that handleClick is the same function reference between renders unless dependencies change.

3. Avoid Re-rendering with `React.memo`

React.memo prevents functional components from re-rendering if their props haven’t changed.

Example:

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

This ensures Child only re-renders when value changes.

4. Derived State Can Cause Unintended Re-renders

Using computed values inside the component without memoization can lead to re-computation on every render.

Fix: Use `useMemo`

const expensiveCalculation = React.useMemo(() => computeHeavyTask(value), [value]);

useMemo ensures that expensive calculations only run when value changes.

Final Thoughts

React’s reconciliation process is efficient, but excessive re-renders can hurt performance. Optimizing with useCallback, useMemo, and React.memo can significantly improve rendering efficiency.

Understanding these nuances ensures that your React apps run smoothly with minimal performance overhead.

Forem: Ravali Peddi

Why Your React Keyed Lists Still Re-render Unnecessarily

Understanding React's Reconciliation & Keyed Lists

1. When Do Keyed Lists Re-render Unnecessarily?

(a) Parent Component Re-renders the List

Fix: Memoization

(b) New Array Instances on Every Render

Fix: Use useMemo

(c) Inline Function Props Causing Re-renders

Fix: Use useCallback

2. When Keyed Lists Do Need to Re-render

3. Summary & Best Practices

How React Batches State Updates (And When It Doesn’t)

Understanding React's State Batching Mechanism

1. What is State Batching?

Example of Batching in React 17 and Earlier

2. React 18's Automatic Batching

Example: Batching in Asynchronous Code in React 18

3. When React Does NOT Batch Updates

(a) Updates inside await calls

(b) Manually Forcing a Re-render

4. Common Pitfalls and Misconceptions

1. Assuming useState Updates Are Always Synchronous

2. Using flushSync Incorrectly

5. Summary & Best Practices

Why React Re-renders More Than Expected

Understanding React’s Reconciliation and Re-rendering Behavior

1. Re-renders Happen When State or Props Change

Example: Unexpected re-render due to reference changes

2. Functions as Props Cause Unnecessary Re-renders

Fix: Use useCallback

3. Avoid Re-rendering with React.memo

Example:

4. Derived State Can Cause Unintended Re-renders

Fix: Use useMemo

Final Thoughts

Fix: Use `useMemo`

Fix: Use `useCallback`

(a) Updates inside `await` calls

1. Assuming `useState` Updates Are Always Synchronous

2. Using `flushSync` Incorrectly

Fix: Use `useCallback`

3. Avoid Re-rendering with `React.memo`

Fix: Use `useMemo`