Reactの再描画について調べたZennTsukuni🦔Reactの再描画について調べた2020/10/30に公開2件Reacttechreactの再描画はどのタイミングで行われるのか気になったので調査しました。間違えてる点があれば光の速さで直すので指摘してください。再描画されるタイミング基本的に以下が呼ばれた後にpropsが比較され、必要があれば再描画されます。useRender親componentが再描画されれば基本的に子componentはすべて再描画されます。false中身まで確認しないので比較コストが低いです。再描画を防ぐためには再描画されるタイミングで関数や値は別の参照のインスタンスが作られてしまうために再描画されていました。関数や値は同じ参照のインスタンスが渡されるようにし、子componentがprops比較してから再描画されるようにす必要があります。React.memoを使って最適化することができます。以下の例だと親が再描画されると新しい参照が渡されてしまうので子componentは再描画されてしまいます。以下の例だと、親が再描画されても同じ参照を返すので子componentは再描画されません。/>}もちろんメモ化するということはコストがかかってしまうのですべてに使ってしまえばいいわけではありません。useMemoを使うか迷ったときは同じ参照のインスタンスを渡したいのかコストの高い計算があるかこのことを意識するのが大切です。Tsukuniキャバリアが好きですバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。2020/10/30その通りです!光の速さで修正します。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。