はじめに
Next.jsでアプリを開発する中で、ReactHooksを使用した。
使用する中で、ReactHooksのルールに違反してエラーが発生したり、更新のタイミングがわからず、画面に表示されたデータを更新することができなかった。
問題を解決するために調べたことをまとめる。
基本
ReactHooksとは、ざっくりいうと値を管理するためのもの
カスタムフック
自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。
公式ドキュメントより引用
https://qiita.com/cheez921/items/af5878b0c6db376dbaf0
React hooksのエラー
よく違反してエラーをだしたルールは、
フックはメソッド内の一番外側でしか、呼び出すことができないルール
Global State アプリケーション全体での状態管理
React Context
Recoil
router ページ遷移
Next.jsでのデータ取得機能 SWR
SWRとはデータ取得のための React Hooks ライブラリ
データの取得状態を表す、キャッシュをもちいてデータの表示を早くする、
オプションを設定することで実行タイミングを制御できる。