React - フック
フック
定義
- プロップを受け取り、React要素を返すJavaScript関数
注意
- フックは React 関数のコンポーネントの最上位で呼び出す必要がある- ループ、条件文、またはネストされた関数の内部ではフックを呼び出せない- React 関数内部でのみ呼び出しが可能である
種類
useState
定義
- コンポーネントの状態を管理するReactのフック - 必ず初期値を指定する必要がある
使用方法
react const[現在のコンポーネント変数, 状態更新関数] = useState(初期値)
//例 const [userName, SetUserName] = useState[''];
//値の取得
ユーザー名 : {userName}
//値を変更するSetUserName('Alpha');~~~
- 初期値としては0、true、''など様々な値を持つことができる- 値の変更は**状態更新関数(新しい値)**の形で変更可能である- 値を取得するには現在のコンポーネント関数を使用して可能である
注意
-
状態の更新は非同期で行われます
-
新しい状態の値が現在の値に依存する場合は注意が必要である
-
上記のコードを利用することで最新の値が使用されるようにできる- React 18以降では状態の更新が一括処理されるため、望まない場合は react-dom ライブラリの flushSync API を利用して一括処理を阻止できる
-
useEffect
定義
- コンポーネントがレンダリングされるたびに特定の処理を実行するフック - fetchリクエストなどが例
使用方法
- useEffectはコールバック関数と依存関係という2つの引数を受け取る- コールバック関数: 補助処理のロジックを含む- 依存関係: 依存関係を含む配列を表す引数（オプション）- 2番目の引数である依存関係を利用すると、レンダリングのたびにコードが実行されるのを防げる
- 2番目の引数に空の配列を渡した場合、最初のレンダリング後のみ useEffect 関数が実行される - 例
react //レンダリングが終了するたびに呼び出すuseEffect(()=> { console.log("useEffect関数が実行されました")});
//引数値が変更されるたびに呼び出されるuseEffect(() => { console.log("useEffect関数が実行されました")}, [userName]);
//最初のレンダリング時のみ呼び出すようにするuseEffect(()=> { console.log("useEffect関数が実行されました")}, []);~~~
-
補助作業の整理
- 作業が不要になった場合には、return値に関数を指定することで作業を停止できる - 例
react useEffect(() => { //作業する内容 return () => { //作業を終了する内容 } }, [count]};
- 上記のコードは、countの値が変更された場合に処理を終了する
useRef
定義
-
レンダリングに不要な値を参照できるフック- useRefは変更可能な単一プロパティを持つrefオブジェクトを返す- 値を変更しても再レンダリングされない- インターバルIDの保存・管理やDOMノードへのアクセスなどの役割に適している- 内部の値を変更するには、現在のプロパティを手動で変更する必要がある
-
注意 - レンダリング中は ref.current を使用してはならない - 値が変更されても再レンダリングされないため、このような場合には state を使用する必要がある
使用方法
react //宣言 const フック名 = useRef(初期値);
//値の変更例const intervalRef = useRef(1);
function handleRefVal() { const intervalId = seInterval(() => { //内部内容 }, 10); intervalRef.current = intervalId;}
//インターバルのキャンセルfunction handleStopRefVal() { const intervalId = intervalRef.current; clearInterval(intervalId);}~~~
参考資料
[React] もう一度useEffectを掘り下げてみよう