React.memo

props の変更に対する render のタイミングで、各 prop が変わらなければ、前回の render の結果がそのまま return されていたことにする HOC。

React での等価性

deps は Object.is が用いられ、 React.memo もデフォルトでは Object.is である。

(2021 記事) useCallback は特に custom hook では適切に使うべき

custom hook を定義している場合、実装側で最適化を可能にするため、論理的に同じ関数ならば、 useCallback を利用しておくべきである。

createAsyncThunk

Redux Toolkit において、 thunk (Promise) の作成(pending), resolve, reject のいずれか、ないしすべてに対して reducer を紐付けたいときに利用できる仕組み

createEntityAdapter

Redux Toolkit が提供する関数の一つ。 DDD で言う Repository みたいなものを redux 上で定義するためのヘルパー。

createSelector

Redux Toolkit が推奨する selector の定義方法。この結果を、例えば useSelector で利用する。

React Hook Form

React でフォームを良い感じに実装するためのライブラリ。 at 2023/08/31 現在。

(記事) React State 管理の比較

1: props リレー / 2: useState + Provider / 3: Redux / 4: Recoil / 5: mobX

のパターンがある。

useCallback

関数をキャッシュする。関数を props として渡している場合、渡す関数が毎回異なることによる、不必要な re-render を防ぐことができる。

useEffect におけるコールバックの実行タイミング

useEffect は deps と returned callback により、実行タイミングが以下のように異なる。

useMemo

const memoizedValue =
  useMemo(
    () => calc(valA),
    [valA]
  )

キャプチャ変数たちに変化がなければ、前の render の値を利用する hook.

useSelector

react-redux が提供する Hook。

効果: store の一部を select する。 select 結果が変わる場合には re-render が走る。