[DevTools Bug]: Highlight updates when components render error

[spencer17x]

Website or app

Nnoe

Repro steps

"use client";
import { memo, useState } from "react";

const A = () => {
  console.log("render A");

  return <div>A</div>;
};

const B = memo(function B() {
  console.log("render B");

  return <div>B</div>;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div onClick={() => setCount(count + 1)}>App: {count}</div>
      <A />
      <B />
    </>
  );
}

export default App;

When component App use <></>, It will mark that component b is also re-rendering,but in fact B did not rerender.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

Error component stack (automated)

GitHub query string (automated)

[spencer17x]

[Mayank6787]

Fixing "Highlight updates when components render" Error

Issue Overview

The error occurs because React detects unnecessary re-renders. In the provided code, Component A is not memoized, causing it to re-render whenever App updates. While B is correctly memoized, React DevTools might still highlight it due to Strict Mode or parent component updates.

Solution: Memoize Component A

To prevent unnecessary re-renders of A, wrap it in memo() like B:

"use client";
import { memo, useState } from "react";

const A = memo(function A() {
  console.log("render A");
  return <div>A</div>;
});

const B = memo(function B() {
  console.log("render B");
  return <div>B</div>;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <div onClick={() => setCount(count + 1)}>App: {count}</div>
      <A />
      <B />
    </>
  );
}

export default App;

Additional Debugging Steps

1. Check React Strict Mode

   • Strict Mode renders components twice in development. Disable it in main.js or _app.js to confirm if re-renders stop.

2. Enable React DevTools Profiling

   • Open React DevTools → Click the ⚡ Profiler tab → Record a re-render.
   • If B still re-renders without prop changes, inspect parent component updates.

3. Confirm Parent Component Behavior

   • If App re-renders, all child components not wrapped in memo() will also re-render.
   • Memoizing A ensures that both A and B avoid unnecessary updates.

Expected Behavior After Fix

• A and B will not re-render when count changes.
• Console logs should only print render A and render B once unless Strict Mode is enabled.
• React DevTools will no longer highlight unnecessary re-renders.

[spencer17x]

Fixing "Highlight updates when components render" Error

Issue Overview

The error occurs because React detects unnecessary re-renders. In the provided code, Component A is not memoized, causing it to re-render whenever App updates. While B is correctly memoized, React DevTools might still highlight it due to Strict Mode or parent component updates.

Solution: Memoize Component A

To prevent unnecessary re-renders of A, wrap it in memo() like B:

"use client";
import { memo, useState } from "react";

const A = memo(function A() {
console.log("render A");
return

A

;
});

const B = memo(function B() {
console.log("render B");
return

B

;
});

function App() {
const [count, setCount] = useState(0);
return (
<>
<div onClick={() => setCount(count + 1)}>App: {count}


</>
);
}

export default App;

Additional Debugging Steps

1. Check React Strict Mode

   • Strict Mode renders components twice in development. Disable it in main.js or _app.js to confirm if re-renders stop.

2. Enable React DevTools Profiling

   • Open React DevTools → Click the ⚡ Profiler tab → Record a re-render.
   • If B still re-renders without prop changes, inspect parent component updates.

3. Confirm Parent Component Behavior

   • If App re-renders, all child components not wrapped in memo() will also re-render.
   • Memoizing A ensures that both A and B avoid unnecessary updates.

Expected Behavior After Fix

• A and B will not re-render when count changes.
• Console logs should only print render A and render B once unless Strict Mode is enabled.
• React DevTools will no longer highlight unnecessary re-renders.

You are wrong, when the code is like this

"use client";
import { memo, useState } from "react";

const A = () => {
  console.log("render A");

  return <div>A</div>;
};

const B = memo(function B() {
  console.log("render B");

  return <div>B</div>;
});

function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <div onClick={() => setCount(count + 1)}>App: {count}</div>
      <A />
      <B />
    </div>
  );
}

export default App;

It hightlight updates correctly.

[spencer17x]

So the difference occurs when app has a root element, such as div