Reactのヒントはフックの依存関係の問題を解消する方法を教えます

const [watchValue、setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');

使用効果(() => {
    何かを実行します(他の値1、他の値2);
}, [watchValue, otherValue1, otherValue2]);

const [watchValue、setWatchValue] = useState('');
const other1 = useRef('');
other2 は useRef() を使用します。

// 参照は変更されないため、依存関係配列に ref を追加する必要はありません useEffect(() => {
    何かを実行します(other1.current、other2.current);
}, [ウォッチ値]);

「react」から useState、useRef をインポートします。

// useState の応答性を維持しながら useRef の参照特性を使用する type StateRefObj<T> = {
  _状態: T;
  値: T;
};
デフォルト関数 useStateRef<T>( をエクスポートする
  初期状態: T | (() => T)
): StateRefObj<T> {
  // 初期化値 const [init] = useState(() => {
    if (typeof initialState === "function") {
      初期状態を () => T として返します ();
    }
    初期状態を返します。
  });
  // コンポーネントのレンダリングをトリガーする状態を設定します。const [, setState] = useState(init);
  
  // 値を読み取ると、最新の値が取得されます // 値を設定すると、setStateがトリガーされ、コンポーネントがレンダリングされます const [ref] = useState<StateRefObj<T>>(() => {
    戻る {
      _状態: 初期化、
      値を設定する(v: T) {
        this._state = v;
        状態を設定します。
      },
      値を取得する() {
        this._state を返します。
      },
    };
  });
  
  // 返されるのは参照変数であり、コンポーネントのライフサイクル全体を通じて変更されません。 return ref;
}

定数ウォッチ = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

// 値を次のように変更します: watch.value = "new";

使用効果(() => {
    何かを実行します(other1.値、other2.値);
   // 実際、これら 3 つの値は参照変数となり、コンポーネントのライフサイクル全体で変更されないため、依存関係配列を追加する必要はありません。 // ただし、React Hooks の eslint プラグインは、useRef を参照としてのみ認識できます。追加されていない場合は警告が表示されます。変数参照の安全性のため、引き続き追加されます。 }, [watch.value, other1, other2]);