Reactでやってしまいがちな、propsを更新したのにuseStateの値が更新されないぞという話。

「あれれ～？ props を更新したのに、子componentのuseStateの値が更新されないぞ～？？」

こんな感じになっていませんか？

export const ParentComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  function handleInput(e: React.ChangeEvent<HTMLInputElement>) {
    setCount(Number(e.currentTarget.value));
  }

  return (
    <div>
      <input
        type="number"
        defaultValue={count}
        name="parent-value"
        onChange={handleInput}
      />
      <ChildComponent parentCount={count} />
    </div>
  );
};

const ChildComponent: React.FC<{ parentCount: number }> = props => {
  const { parentCount } = props;
  const [count] = useState(parentCount);
  return (
    <div>
      <span>update されない </span>
      {count}
    </div>
  );
};

useStateの初期値にpropsを渡すパターンですね。恥ずかしながら、自分もときどきやっちまいます
理由は、単純に ChildComponentがrerenderされてるだけなので、stateの値を保持しているからです。

こんなときはuseEffectを使ってupdateします。

const ChildComponent: React.FC<{ parentCount: number }> = props => {
  const { parentCount } = props;
  const [count, setCount] = useState(parentCount);

  useEffect(() => {
    setCount(parentCount);
  }, [parentCount]);

  return (
    <div>
      <span>update できる </span>
      {count}
    </div>
  );
};

当たり前じゃんってことなのですが、よく聞かれるし自分でもやってしまいがちなのでまとめました(^_^;)

サンプルコード