Zenn
Open1

Next.jsの学習集

Next.js
状態管理
シンタックスハイライト
m____hirokim____hiroki

useStateの値を概念が同じものを一つのuseStateで管理する方法

リファクタ前

const [filter, setFilter] = useState<string>('')
const [filter2, setFilter2] = useState<string>('')
※setFilter2も同様
<Select
   style={{ width: '150px' }}
   showSearch
   filterOption={(input, option) =>
      (option!.children as unknown as string).includes(input)
   }
   onSelect={setFilter}
   placeholder=""
>

リファクタ後

interface Filters {
  filter: string | null;
  filter2: string | null;
}
const [filter, setFilter] = useState<Filters>({
    filter: '',
    filter2: '',
  });
<Select
   style={{ width: '150px' }}
   showSearch
   filterOption={(input, option) =>
       (option!.children as unknown as string).includes(input)
   }
   onSelect={(value) =>
         setFilters((prev: Filters) => ({ ...prev, filter: value.toString() }))
   }
  placeholder=""
>

setFilterをする際にprevを使用しているのは下記が理由です

  • 非同期更新： useStateの更新は非同期で行われることがあります。そのため、直前の状態を考慮せずに新しい値を代入すると、複数の非同期更新が競合してしまう可能性があります。前回の状態を取得してから更新することで、競合を回避できます。

  • 正確な状態の管理： Reactは正確な状態の管理を行っています。前回の状態を考慮せずに直接新しい値を代入すると、Reactが正確な状態の変更を把握できなくなり、再描画が正しく行われない可能性があります。

まとめ

  • 基本的に型宣言はしましょう
  • useStateを使用する際は前回の値を考慮しましょう
    また一つ勉強になりました
    ちなみにSelectはantdパッケージです