早速、useEffectを使う場面を見つけた話

先日、useEffectはあまり使わない方が良い的な話を書いたのですが、早速便利に使える場面がやってきました！

いつかと言うと、テーブルのレコードの値をモーダルに持っていって使う時です。

具体的に説明していきます。

モーダルとは、ボタンをクリックすると表示されるこれ。

モーダルは、画面を読み込んだ時に、非表示として読み込まれます。

この時、useStete(初期値)のように、初期値を設定していたときには、画面読み込み時の初期値が入ります。

そのため、モーダル表示時ごとに初期値をセットすることができません。

そこで、便利なのがuseEffectです。
isOpenの値が変わるたびに、set〇〇で値をセットするように書くと、モーダルが開かれるタイミングで値をセットすることができます。

例えばこんな例

import React, { useState, useEffect } from 'react';
import Modal from 'react-modal'; 

// モーダル用のコンポーネント例
function ExampleModal({ isOpen, onClose }) {
  const [inputValue, setInputValue] = useState('読み込まれる時にセットできる初期値');

  // isOpen が true になったときに初期値をセット
  useEffect(() => {
    if (isOpen) {
      setInputValue('モーダルが開かれたときの初期値');
    }
  }, [isOpen]);

  return (
    <Modal
      isOpen={isOpen}
      onRequestClose={onClose}
      contentLabel="Example Modal"
      ariaHideApp={false} // アクセシビリティ対応のための設定。必要に応じて調整してください
    >
      <h2>モーダルの内容</h2>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={onClose}>閉じる</button>
    </Modal>
  );
}

export default ExampleModal;

こんな時に、useEffectが便利に使えることが判明しました！

つい先日、useEffectが便利に使える場面があれば投稿しますと書いたばかりなのにもう見つけてしまいました。