[react]memo関数を用いた効率的な符号化

memo
ユーザーは反応の速いUIが好きです.
したがって,UIを向上させるためにreactはreactである.memo関数が作成されました.
不要な再レンダリングを防ぐために、レンダリング結果をアノテーションします.

例

function Cart() {
  return <Parent name="john" old="20" />;
}

function Parent(props) {
  return (
    <div>
      <Child1 name={props.name} />
      <Child2 old={props.old} />
    </div>
  );
}
function Child1() {
  useEffect(() => {
    console.log('렌더링됨1');
  });
  return <div>1111</div>;
}
function Child2() {
  useEffect(() => {
    console.log('렌더링됨2');
  });
  return <div>2222</div>;
}

上に示すように、Propsを渡して親コンポーネントで使用するデータを子コンポーネントで使用できます.
前述したように、コードを記述すると、不要な再レンダリングが発生し、コードの効率が低下する可能性があります.
たとえば、Parentコンポーネントで使用されるnameデータが変更された場合.
すべてのサブエレメントが再レンダリングされます.
従って,上記のような非効率な状況を防止するためにmemo関数を用いなければならない.

function Cart() {
  return <Parent name="john" old="20" />;
}

function Parent(props) {
  return (
    <div>
      <Child1 name={props.name} />
      <Child2 old={props.old} />
    </div>
  );
}
function Child1() {
  useEffect(() => {
    console.log('렌더링됨1');
  });
  return <div>1111</div>;
}
const Child2 = memo(function () {
  useEffect(() => {
    console.log('렌더링됨2');
  });
  return <div>2222</div>;
});

memo関数を使用してChild 2コンポーネントをラップする場合、child 2コンポーネントに関連するprops(データ)が変更された場合にのみ再レンダリングされ、より効率的なコードを記述できます.