React 要素を props で渡すことで不要な再レンダリングを回避する

この記事の内容は、React のv17.0.2で動作確認している。

React コンポーネントが入れ子になっているとき、親のコンポーネントが再レンダリングされると、子のコンポーネントも再レンダリングされる。stateの受け渡し等があるかどうかは関係ない。
そのため以下のコードの場合、ボタンを押下するとParentだけでなくChildも再レンダリングされ、両方のログが流れる。

import {useState} from 'react';
import {render} from 'react-dom';

function Child() {
  console.log('render Child');

  return <div>Child</div>;
}

function Parent() {
  const [state, setState] = useState(0);
  const onClick = () => {
    setState((s) => s + 1);
  };

  console.log('render Parent');

  return (
    <div>
      <button type="button" onClick={onClick}>
        count up
      </button>
      <br />
      {state}
      <Child />
    </div>
  );
}

function Container() {
  return <Parent />;
}

render(<Container />, document.querySelector('#container'));

だがChildはParentのstateの値がなんであれ表示する内容は変わらないため、Childの再レンダリングは不要である。
この不要な再レンダリングを回避する方法のひとつに、React.memoを使ったメモ化がある。

const Child = memo(() => {
  console.log('render Child');

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

メモ化については、以下の記事に詳しく書いた。

numb86-tech.hatenablog.com

これ以外の方法として、「Childコンポーネントが返す React 要素をParentのpropsとして渡す」というものがある。

function Parent({children}) {
  const [state, setState] = useState(0);
  const onClick = () => {
    setState((s) => s + 1);
  };

  console.log('render Parent');

  return (
    <div>
      <button type="button" onClick={onClick}>
        count up
      </button>
      <br />
      {state}
      {children}
    </div>
  );
}

function Container() {
  return (
    <Parent>
      <Child />
    </Parent>
  );
}

こうすると、Parentが再レンダリングされてもChildは再レンダリングされない。

props.childrenではなく任意のpropsに React 要素を渡してもよい。

function Parent({originalProps}) {
  const [state, setState] = useState(0);
  const onClick = () => {
    setState((s) => s + 1);
  };

  console.log('render Parent');

  return (
    <div>
      <button type="button" onClick={onClick}>
        count up
      </button>
      <br />
      {state}
      {originalProps}
    </div>
  );
}

function Container() {
  return <Parent originalProps={<Child />} />;
}

これでも、同様の結果になる。

考えてみれば当然で、コンポーネント（関数）ではなくて要素（関数の返り値）を外から渡しているのだから、Parentが再レンダリングされたところで、渡されている要素はそのまま同じものが使われる。
以下のコードではParentのレンダリング毎のoriginalPropsをlistに入れているが、list内の全ての要素は常に同じものを参照している。

import {useState} from 'react';
import {render} from 'react-dom';

function Child() {
  console.log('render Child');

  return <div>Child</div>;
}

const list = [];

function Parent({originalProps}) {
  const [state, setState] = useState(0);
  const onClick = () => {
    setState((s) => s + 1);
  };

  console.log('render Parent');

  list.push(originalProps);
  if (list.length >= 2) {
    console.log(list.every((elem) => elem === originalProps)); // true
  }

  return (
    <div>
      <button type="button" onClick={onClick}>
        count up
      </button>
      <br />
      {state}
      {originalProps}
    </div>
  );
}

function Container() {
  return <Parent originalProps={<Child />} />;
}

render(<Container />, document.querySelector('#container'));

そのため、要素ではなくコンポーネントをpropsで渡してしまうと、再レンダリングは回避できない。

以下のコードでは、要素ではなくChildコンポーネントをpropsで渡し、Parentのなかで要素を作成している。
この場合、Parentが再レンダリングされる度にChildが呼び出され、新しく要素を作ることになる。
つまり、Parentが再レンダリングされるとChildも再レンダリングされるということである。

import {useState} from 'react';
import {render} from 'react-dom';

function Child() {
  console.log('render Child');

  return <div>Child</div>;
}

const componentList = [];
const elementList = [];

function Parent({OriginalProps}) {
  const [state, setState] = useState(0);
  const onClick = () => {
    setState((s) => s + 1);
  };

  console.log('render Parent');

  const element = <OriginalProps />; // 渡されたコンポーネントから要素を作成している

  componentList.push(OriginalProps);
  if (componentList.length >= 2) {
    console.log(componentList.every((elem) => elem === OriginalProps)); // true
  }

  // どの要素も`<div>Child</div>`ではあるが、別々の`<div>Child</div>`が都度作られている
  elementList.push(element);
  if (elementList.length >= 2) {
    console.log(elementList.every((elem) => elem === element)); // false
  }

  return (
    <div>
      <button type="button" onClick={onClick}>
        count up
      </button>
      <br />
      {state}
      {element}
    </div>
  );
}

function Container() {
  return <Parent OriginalProps={Child} />; // 要素ではなくてコンポーネントを渡している
}

render(<Container />, document.querySelector('#container'));