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

2023/08/31 129 users useMemo useCallback React メモ化

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

useMemoのコストを心配する前に余計なdivを減らせ！

2021/05/26 15 users useMemo React div コンポーネント 筆者

React では、useMemoやReact.memoなどが最適化の手段として知られています。 これらは最適化であるため、必要が無いのにuseMemoを使うことは無駄な最適化であるとして避けられる傾向にあります。 筆者が簡単なベンチマークを取ってみたところ、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div... 続きを読む

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

2021/02/23 114 users useCallback uhyo Props useMemo

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

React16.6の新機能 React.memo のコードリーディング

2020/01/16 8 users lazy コードリーディング 新機能 機能

先日「React v16.6.0: lazy, memo and contextType」にていくつかの新機能が発表されました。この中のReact.memoが個人的に嬉しい機能だったので、軽く調べてみました。 React.memoとは何か Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentU... 続きを読む