Wrapping component can avoid child component re-rendering...?

Question

I saw one posting that is about 'how to prevent rerendering, and too much adding memoization'.

The posting: https://d2.naver.com/helloworld/9223303 (it's written in korean, I'm not sure it has english version)

In the middle of this, it says

One of the ways to eliminate unnecessary memoization is that using wrapping component can avoid re-rendering child component with code below:

function ChildMemo () {  
  const [count, setCount] = React.useState(0);

  const doubleCount = count * count;
  console.log('doubleCount', count * count);

  return (
    <>
      <h2>count: {count}</h2>
      <h2>count * count: {doubleCount}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Click</button>
    </>
  )
}

function ParentMemo({ children }) {  
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <>
      <h1>time: {format(time, 'hh:mm:ss')}</h1>
      {children}
    </>);
}

export default function Memo() {  
  return <ParentMemo>
    <ChildMemo/>
  </ParentMemo>
};

(code from this posting)

and truly, when I ran the code above, I could see the child component wasn't re-rendering.

For reference, the code below that I change a little bit happens child component re-render, cause the parent component re-rendering with updating state causes child component re-render.

// this code doesn't have wrapping component, and there's ChildMemo re-rendering
// ChildMemo re-render at every single seconds(ParentMemo component re-rendering)
import "./styles.css";
import * as React from "react";

export default function App() {
  return (
    <div className="App">
      <ParentMemo />
    </div>
  );
}

function ChildMemo() {
  const [count, setCount] = React.useState(0);

  const doubleCount = count * count;
  console.log("doubleCount", count * count);

  return (
    <>
      <h2>count: {count}</h2>
      <h2>count * count: {doubleCount}</h2>
      <button onClick={() => setCount((prev) => prev + 1)}>Click</button>
    </>
  );
}

function ParentMemo({ children }) {
  const [time, setTime] = React.useState(new Date());

  React.useEffect(() => {
    const intervalId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <>
      <h1>time: {time.getTime().toString()}</h1>
      <ChildMemo />
    </>
  );
}

Can anyone know why the wrapper component like above can prevent re-rendering by any chance?

Answer 1

Certainly! The wrapper component can prevent re-rendering because it acts as a barrier between the parent and child components. When the parent component re-renders, it might not necessarily cause the child component to re-render if the child component is not directly dependent on the state or props of the parent.

In the provided example, when the ChildMemo component is wrapped inside the ParentMemo component, it isolates ChildMemo from changes in the parent's state (time). Since ChildMemo doesn't directly depend on the time state, it doesn't re-render unnecessarily when the ParentMemo re-renders due to changes in time. This isolation prevents unnecessary re-renders of ChildMemo.