sagantaf

IT関連の技術記事を書くブログ。

ReactHooks

Recoil get・setとuseRecoilStateの使い分け

フロントエンドの状態管理ツールの1つであるRecoil。 その使い方として、状態管理したい変数をatomやselectorに定義し、getやset、resetで、取得、更新、初期化する、という流れですが、useRecoilStateやuseRecoilValueなどのReact hooksとの違いがいまいち…

React HooksのuseReducerとuseContextとカスタムフック

useReducer useReducerの基本 Stateとdispatch(actionを送信する関数)を返すフック。 これを使うことでコンポーネント内でstate管理ができる。 書き方は以下。 const [state, dispatch] = useReducer(reducer, stateの初期値) reducer にはstateの更新方法を…

React.memoとReact HooksのuseCallbackとuseMemo

React.memo React.memoの基本 処理した結果をキャッシュとして保持することを「メモ化」と呼ぶ。React.memoはそのメモ化をするための機能。 メモ化することでコンポーネントの再レンダーを回避し、パフォーマンスを上げることができる。レンダリングに時間が…

React HooksのuseEffectとuseRef

useEffect useEffectの基本 useEffectとは何か? コンポーネントのレンダー後か、アンマウント後に処理が稼働するフック。 「レンダー後」に稼働するため、DOMを操作できる。また、アンマウントとはコンポーネントをDOMから削除して破棄することを指す。 【Re…

React Hooksの基本とuseState

Hooksとは HooksはReactの16.8.0バージョンから追加された新しい機能。 Hooksを使うことで、ReactのComponentを関数で定義することできる。従来はクラスによる定義のみであったが、関数でも定義できるようになったことで、 同等の機能を実装する場合、クラス…