React

状態管理ライブラリ

作成日時：2024-08-13
更新日時：2024-08-13

useState

最新の状態に基づいて更新を行う場合、setter関数に関数を渡す。

setState((v) => v + 1);
setState(v)とかだと、連続で実施した際に更新されなかったり、古い値でイベントが動きかねない。

関連のあるstateはまとめる。
useState(primitive)よりuseState(object)

stateが更新されると、基本的にコンポーネント単位で再レンダリング。
関係のない子コンポーネントをレンダリングしたくないならば、

下記みたいに、既存の値をベースに変更することも可能。

setXXX((prev)=>{
  ...prev,
  // 変更処理
})

オブジェクトのイミュータブルな更新

{...object, foo: bar}

useReducer

stateの更新処理を定義できる。
setState(flg ? foo : bar)よりdispatch(object)

reducer = (currentValue, someObject) => {
  // currentValueとsomeObjectに応じた更新処理
  return updateValue;
};
const [stare, dispatch] = useReducer(reducer, initialValue)

useRef

レンダリングを発生させず状態を扱う

const ref = useRef(initialValue);
ref.current = something;

useEffect

React Developer Tool

React.memo

propが変わらない限り、再レンダリングされない。

キャッシュ

• useMemo
• useCallback

参考資料

React 研修 (2024)

クリーンナップ処理

useEffect(() => {
  // セットアップ: スクロールイベントリスナーを追加
  window.addEventListener('scroll', handleScroll);

  // クリーンアップ関数: コンポーネントが削除される時に実行される
  return () => {
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

key

同じ親要素で、同一のコンポーネントが複数レンダリングされるならば、
それらにユニークなキーを付与しなければならない。

ページャ

react-paginate - npm
React-Paginateを用いたページネーションの導入手順 #pagination - Qiita

アプリ側からページを変えたければ、forcePageを使う。

parse関数

html-react-parser。
HTML文字列をReact要素に変換する。
scriptタグは設定しても、基本発火しない。

状態管理ライブラリ

useStateだと限界がある。
複数のコンポーネント間での状態共有とか。(->props drilling。子にpropを渡していく奴)
グローバルに状態管理の一元化をしたくなる。

イメージとしては、
複数の画面がDBのあるレコードを参照していて、
レコードの内容が変更されたらば、トリガーにより画面の内容も変化する。
こんな感じ。