Reactの再レンダリングを抑えるシンプルな方法

2023/08/31 129 users React useCallback React.memo

はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたい... 続きを読む

そこのお前！　余計なuseMemo1個に含まれるオーバーヘッドは余計なdiv 0.57個分だぜ！ - Qiita

2022/01/06 68 users React Qiita オブジェクト API 生成

※効果には個人差があります。 useMemoのオーバーヘッドについて ReactのuseMemoは、パフォーマンス最適化に使われるAPIです。コンポーネント内で計算やオブジェクトの生成を行う際に、以前の計算結果をキャッシュして使い回すことで再レンダリング時の計算を削減したり、新しいオブジェクトの生成を防ぐことができます。... 続きを読む

useCallbackはとにかく使え！　特にカスタムフックでは - uhyo/blog

2021/02/23 114 users useCallback uhyo Props React

Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する... 続きを読む