連続して発火するイベントの処理を減らしたいっ！(React)

2022年5月23日

例えばscrollの位置を保存するような処理を書こうとすると、連続してイベントが発生してしまって処理が無駄に行われる場合があります。

const [height, setHeight] = useState(0);

// heightが変更された時
useEffect(() => {
  // 保存する
  save(height);
}, [height]);

簡単な対応としてsetTimeoutを追加して500msごとに保存するように変更します。

const [height, setHeight] = useState(0);

// heightが変更された時
useEffect(() => {
  const t = setTimeout(() => {
    // 保存する
    save(height);
  }, 500);

  return () => clearTimeout(t);
}, [height]);

関連記事

  1. useReducerでコンポーネントに渡すpropsをすっきりさせたいっ！[React/typescript] 機能追加を続けるとuseStateが乱立というかどんどん増えて行ってしまうので、useReducerでまとめて処理したいと思います。 useState import { useState } from 'react'; […]...
  2. React(TypeScript)でコンポーネントのtypeを別のコンポーネントで使いたいっ！[ComponentProps] とあるコンポーネントのPropsで指定しているtypeを使いまわしたい時にComponentPropsを使うのを忘れそうなのでメモ。 const Hoge: React.FC<{ id: number }> […]...
  3. useEffectのよくやるパターンをメモっ！ componentDidMountの置き換え componentDidMount() { getHogeList(); } mount時にデータ取得するようなやつ。 useEffect(() => { getHog...
  4. react-i18nextのuseTranslationをTranslationコンポーネントに書き換えた話 ドキュメントを上から読んでいって、まずは普通に useTranslation(); で実装しようとしました。 (i18nextのinitは別のとこでやってるので省略) useTranslation(); まずは親になるM […]...
React