Returns

The set function that lets you update the state to a different value and trigger a re-render.

地味に大事なところ。

Caveats

useState is a Hook, so you can only call it at the top level of your component or your own Hooks.

HookがどうしてTopレベルでしか呼べないのか、useがどうして条件分岐の中でも呼べるのか、しっかり説明できないかも。purityが保たれてればいいって話に行き着く気はするが...。

Caveats

The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.

例のあれか？
https://zenn.dev/ikenohi/articles/4a4d659e80237b

If the new value you provide is identical to the current state, as determined by an Object.is comparison, React will skip re-rendering the component and its children.

新しいstate variableが古いそれとObject.isで比較して同じであればre-renderされない

React batches state updates. It updates the screen after all the event handlers have run and have called their set functions. This prevents multiple re-renders during a single event. In the rare case that you need to force React to update the screen earlier, for example to access the DOM, you can use flushSync.

setStateはバッチ処理されるので、逐次re-renderしたいときはflushSyncを使う

Object.jsを確認
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is

console.log(Object.is('1', 1));
// Expected output: false

console.log(Object.is(NaN, NaN));
// Expected output: true

console.log(Object.is(-0, 0));
// Expected output: false

const obj = {};
console.log(Object.is(obj, {}));
// Expected output: false

Object.is() is also not equivalent to the === operator. The only difference between Object.is() and === is in their treatment of signed zeros and NaN values. The === operator (and the == operator) treats the number values -0 and +0 as equal, but treats NaN as not equal to each other.

const isZero = -0 === 0はtrueで const isNaN = NaN === NaNはfalse
const isZero = Object.is(-0, 0)はfalseで const isNaN = Object.is(NaN, NaN)はtrue

これを直感的に理解できるような知識がほしい

Updating state based on the previous state

ありがちなミス

function handleClick() {
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
  setAge(age + 1); // setAge(42 + 1)
}

こうしましょうねと

function handleClick() {
  setAge(a => a + 1); // setAge(42 => 43)
  setAge(a => a + 1); // setAge(43 => 44)
  setAge(a => a + 1); // setAge(44 => 45)
}

React puts your updater functions in a queue.

queueという表現が度々出てくるが、それについてはここに書いてあるらしい。別スクラップにて。
https://react.dev/learn/queueing-a-series-of-state-updates

Is using an updater always preferred?

However, if you do multiple updates within the same event, updaters can be helpful. They’re also helpful if accessing the state variable itself is inconvenient (you might run into this when optimizing re-renders).

If you prefer consistency over slightly more verbose syntax, it’s reasonable to always write an updater if the state you’re setting is calculated from the previous state. If it’s calculated from the previous state of some other state variable, you might want to combine them into one object and use a reducer.

設定する状態が前の状態から計算される場合は、常にアップデータを書くのがreasonableで、それらがパターン化できるならばreducerに押し込もう。

Resetting state with a key

componentに渡すkeyを変更することで、そのcomponentのstateは初期化される。
詳細はこちらにあるらしい。別スクラップにて。
https://react.dev/learn/preserving-and-resetting-state

Storing information from previous renders

previous renderingのstate variableを計算に使うために、コンポーネントの中で条件付きsetStateを書くテクがあるらしい。ちょっとこわい。

import { useState } from 'react';

export default function CountLabel({ count }) {
  const [prevCount, setPrevCount] = useState(count);
  const [trend, setTrend] = useState(null);
  if (prevCount !== count) {
    setPrevCount(count);
    setTrend(count > prevCount ? 'increasing' : 'decreasing');
  }
  return (
    <>
      <h1>{count}</h1>
      {trend && <p>The count is {trend}</p>}
    </>
  );
}

Note that if you call a set function while rendering, it must be inside a condition like prevCount !== count, and there must be a call like setPrevCount(count) inside of the condition.

つける条件にも条件がある

This pattern can be hard to understand and is usually best avoided. However, it’s better than updating state in an effect.

むずいから避けたほうがいいけど、useEffectの中でstateを更新するよかマシって書いてある。