💭
【小話】useStateの初期値にPropを指定しても再描画時は変更されない
まだ慣れきっていないなあと思ったのでメモ
親のステート更新で再描画が走る時に、親の中で呼び出している子コンポーネントも再描画されるという理解のもとに、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