Zenn
🔥

再レンダリングが起きる条件

2024/11/13に公開
React
tech

stateが更新されたコンポーネントは再レンダリングされる

stateが更新された時に正しい値が再レンダリングされないと正しい値が画面に表示されない

propsが変更されたコンポーネントは再レンダリング

親の値からpropsを受け取っているコンポーネントはそのpropsが変更されたら再レンダリングされる。

再レンダリングされたコンポーネント配下の子要素は再レンダリング

Aというコンポーネントの下にB、Cのコンポーネントがあります。Bに設定しているstateが更新した時、Aの再レンダリングはスキップされ、Bの再レンダリングがされた時子要素であるCも再レンダリングされます。

再レンダリングの最適化

親コンポーネントが再レンダリングされると子ポーネントであるChildAreaも再レンダリングされる。

const style = {
  width: "100%",
  height: "200px",
  backgroundColor: "khaki",
};

export const ChildArea = (props) => {
  const { open } = props;

  const data = [...Array(2000).keys()];
  console.log(data);
  return (
    <>
      {open ? (
        <div style={style}>
          <p>子コーポント</p>
        </div>
      ) : null}
    </>
  );
};

親コンポーネントが再レンダリングされてもChildAreaのpropsに変更がない限り再レンダリングしたない。これは、propsが変更されない限り再レンダリングがされない。

import { memo } from "react";

const style = {
  width: "100%",
  height: "200px",
  backgroundColor: "khaki",
};

export const ChildArea = memo((props) => {
  const { open } = props;

  const data = [...Array(2000).keys()];
  console.log(data);
  return (
    <>
      {open ? (
        <div style={style}>
          <p>子コーポント</p>
        </div>
      ) : null}
    </>
  );
});

https://www.udemy.com/course/react_stepup/learn/lecture/24823320#overview

Discussion