React

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

useState

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

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

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

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

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

{...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)