useStateの初期化ができなくて２時間潰した俺みたいになるな

Reactを触ってかれこれ１年以上経つのに、useStateの初期化ができなくて2時間以上潰しました。
結果、原因はuseStateの初期化は最初の１度のみ行われるということがわかっていなかったことでした。

useStateの初期化は最初の１度のみ

App.jsx

import { useState } from "react";
import "./styles.css";

const InitValUI = (props) => {
  const { val } = props;
  const [initVal] = useState(val ? val : ""); ← valが初期値として設定されない
  return <h1>{initVal}</h1>;
};

export default function App() {
  const [val, setVal] = useState();

  const onClickBtn = (val) => {
    setVal(val);
  };
  return (
    <div className="App">
      <button onClick={() => onClickBtn("コーラ")}>
        押された時に初期値が設定されるよ
      </button>
      <InitValUI val={val} />
    </div>
  );
}

あまり実用的なコードではありませんが、上記のコードはボタンが押されたらvalが設定され、propsでInitValUIに渡り、useStateの初期値に設定され画面に表示されるということを期待しています。しかしボタンを押してもvalは初期値として設定されません。

冒頭でも言いましたが、ずばり原因はuseStateの初期化は最初のレンダリング時に一度しか設定されないからです

上記のコードでは特に制御をしていないため、InitValUIも最初に画面を開いた時にレンダリングされます。
そして最初のレンダリング時にはvalには値が設定されていないため、useStateの初期値には空文字""が設定されます。以降はuseStateの初期化はされないためval設定されないということです。

そのため、初期化したい値が設定されない間はレンダリングしない処理を追加してあげれば正しく値が設定されます。
上記のコードの場合以下のように修正するとvalが設定されます。

- <InitValUI val={val} />
+ {val && <InitValUI val={val} />}