React

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseCallbackとは useCallbackは、再レンダー間で関数定義をキャッシュできるようにするためのReact Hookです。 関数をキャッシュに保持することにより、関数の依存関係が変わらない限り、関数を再利用することで関数が不要に再作成されるのを防ぐことができます。 そのため、子コンポーネントに渡すコールバック関数が常に …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseMemoとは useMemoは、値のメモ化を行うためのReact Hookです。 メモ化のプロセスで関数の計算結果をメモリ内のキャッシュに保存することで、同じ入力に対する再計算を避け、パフォーマンスを向上させることができる技術です。 特に計算コストが高い処理や、頻繁に呼び出される関数に対して有効です。 公式ドキュメント：htt …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseRefとは useRefは、レンダー時には不要な値を参照するためのReact Hookです。 Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行いDOM 要素へのアクセスや状態の保持するために使用されます。 公式ドキュメント：https://ja.react.dev/reference/re …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseReducerとは useReducerは、リデューサ (reducer) をコンポーネントに追加するための React Hookです。 コンポーネント内で状態管理を行うために使用され、複雑な状態ロジックや複数の状態を一元管理することができます。 useStateの代替として、より複雑な状態遷移を必要とする場合や、状態管理を一 …

開発環境 Visual Studio Code:version 1.73.0 OS:Windows10 react:18.2.0 react-dom:18.2.0 ReactのuseContextとは useContextは、コンテキストを使用するためのReact Hookです。 Reactコンポーネントツリー全体に対して「グローバル」とみなすデータを利用するために設計されています。これにより、最下層までpropsバケツリレーをする必要がなくなります。 Contextを使用することで、コンポーネントツリー …