💭

【小話】useStateの初期値にPropを指定しても再描画時は変更されない

2022/10/05に公開

まだ慣れきっていないなあと思ったのでメモ
親のステート更新で再描画が走る時に、親の中で呼び出している子コンポーネントも再描画されるという理解のもとに、Propを子コンポーネントのステートの初期値としたが、再描画のタイミングで初期値が変更されるわけではないことがわかった。

parent.tsx
const [test, setTest] = useState<string>('')
return(
<div>
  <child value={test} />
</div>
);
child.tsx
const child = ({value}: ChildProps) => {
    const [local,setLocal] = useState<string>(value)
    console.log(value, local)
}

上記のような時に親のsetTestで値を更新し再描画されても、子に渡されるvalueは新しい値になるが、ステートであるlocalは一番最初のvalueの値のままなる。
初期値なんだからそうでしょと言われればそうなのだけれど、そっかーとなったので次忘れないようにメモとして残す。

Discussion