#528 React.memo and children

medium

react

Consider the following code:

const ChildMemo = React.memo(Child);
const Component = () => {
  return (
    <ChildMemo>
      <div>Some text here</div>
    </ChildMemo>
  );
};

const ChildMemo = React.memo(Child);
const Component = () => {
  return (
    <ChildMemo>
      <div>Some text here</div>
    </ChildMemo>
  );
};

Let's say a state change happens in the Component, will ChildMemo re-render or not?

👀

Click here to see the solution

The nice nesting syntax in JSX is really just sugar for passing a children prop. For example, this code:

const Component = () => {
  return (
    <ChildMemo>
      <div>Some text here</div>
    </ChildMemo>
  );
};

const Component = () => {
  return (
    <ChildMemo>
      <div>Some text here</div>
    </ChildMemo>
  );
};

is equivalent to:

const Component = () => {
  return <ChildMemo children={<div>Some text here</div>} />;
};

const Component = () => {
  return <ChildMemo children={<div>Some text here</div>} />;
};

It behaves exactly the same. JSX elements are just objects created via React.createElement. In this case, the <div> is represented as an object like:

{
  type: "div",
  // ...other properties
}

{
  type: "div",
  // ...other properties
}

From a memoization perspective, ChildMemo receives a prop (children) that is a new object on every render. This means React.memo won’t prevent re-renders.

To fix this, we need to memoize the div itself using useMemo:

const Component = () => {
  const content = useMemo(() => <div>Some text here</div>, []);
  return <ChildMemo children={content} />;
};

const Component = () => {
  const content = useMemo(() => <div>Some text here</div>, []);
  return <ChildMemo children={content} />;
};

Now the children prop is stable, and React.memo can effectively prevent unnecessary re-renders.