Next.js 13 Template と Layout の使い分け

2023/09/06 14 users layout template 画面遷移 Next.js 複数

Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayou... 続きを読む

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

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

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

【React】useEffect解体新書 - Qiita

2023/02/20 5 users Qiita React Props state パク

はじめに 最近、周囲から「useEffectでバグった」という声を聞くことが増えました。そこで、今までなんとなくで使っていた useEffect とは何かを正しく理解したいと思い記事を書くに至りました。 この記事はReactの再レンダリングの仕組み(propsやstateが変更される度に再レンダリングされる)を理解している方向けです。... 続きを読む

React の再レンダリングを防ぐ3つのパターン

2022/10/02 11 users React state コンポーネント パフォーマンス ボタン

React のパフォーマンスについて語るとき、コンポーネントの再レンダリングは外せない話題となるでしょう。React は以下の条件のときに再レンダリングが発生します。 コンポーネントの state が更新された 親のコンポーネントが再レンダリングされた 例えば典型的なカウンターアプリのように、ボタンをクリックしたとき ... 続きを読む

useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita

2022/01/19 41 users Qiita React useReducer ステート 複数

こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以... 続きを読む

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

2021/02/23 114 users uhyo useCallback Props React

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

Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita

2020/05/12 5 users コンポーネント Qiita エラー オーバーレイ コード

Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Sta... 続きを読む