ReactでuseStateでpropsの値を使用した時に画面が更新されない時の対応方法

2023年2月8日

概要

初歩的な話であるが、Reactを久しぶりに触ると忘れてしまうのでメモ。
コンポーネント内で親のpropsをuseStateで保持すると、propsが変更された際に描画が変更されない場合の対策方法。

内容

症状概要

コンポーネントとして、親から渡されるpropsの値をuseStateで保持すると、親側のpropsの値が変更されても描画が変更されない。
下記のようなコードがあって、setCount側で変更した場合には表示はpタグの値は変更されるが、このコンポーネントを使用する親のpropsのcountが変わっても表示は反映されない。

type CounterProps = {
  count: number;
};

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(props.count);
  // 実際にはsetCountを使った処理があるとして省略

  return <p>{count}</p>
}

type CounterProps = {

count: number;

};

export default function Counter(props: CounterProps) {

const [count, setCount] = useState(props.count);

// 実際にはsetCountを使った処理があるとして省略

return <p>{count}</p>

}

解決策

これはuseStateの初期化は1回しか処理が走らないため。
propsが変更されても、以前の値が残ったままとなっている。
useEffectでpropsを監視することで対応可能。

type CounterProps = {
 count: number;
};

export default function Counter(props: CounterProps) {
 const [count, setCount] = useState(props.count);

 // props.countが変更されたらsetCountでcountを変更する
 useEffect(() => {
    setCount(props.count)
  }, [props.count]);

 return <p>{count}</p>
}

type CounterProps = {

count: number;

};

export default function Counter(props: CounterProps) {

const [count, setCount] = useState(props.count);

// props.countが変更されたらsetCountでcountを変更する

useEffect(() => {

setCount(props.count)

}, [props.count]);

return <p>{count}</p>

}