useState / useEffect ざっくりキャッチアップ

useState / useEffect：Reactの状態と副作用はこう扱う

Reactを使っていると必ず出てくるのがuseStateとuseEffect。
この2つがわかると、「静的な画面」から「動きのあるUI」へ一気にステップアップできる。

useState：Reactの状態管理のド定番

useStateはコンポーネント内で状態（＝変化する値）を管理したいときに使う。
カウンター、フォーム入力、チェックボックスのオンオフ…全部これ。

tsx
const [count, setCount] = useState<number>(0);

count：今の状態の値（ここでは数値）
setCount：状態を更新する関数
0：状態の初期値

この構文で状態を「宣言」できる。

更新してみる

tsx
const handleClick = () => {
  setCount(count + 1);
};

setCountを呼べば、Reactは「状態が変わった」とみなして自動的に再レンダリングしてくれる。

🔁 変更→再レンダリング→表示更新、全部Reactがやってくれる。

useEffect：副作用を扱うためのフック

useEffectは「DOMの更新以外の処理」（＝副作用）を扱うときに使う。
例：タイマー、API通信、イベントリスナーの登録など。

tsx
useEffect(() => {
  const timer = setInterval(() => {
    setCurrentTime(new Date());
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

この例だと：

初回マウント時にタイマーが動き始める
1秒ごとに現在時刻を更新
アンマウント時にはタイマーをクリア（これがクリーンアップ処理）

第2引数（依存配列）

[]：初回マウント時のみ実行
[value]：valueが変わるたびに実行
省略すると毎回再レンダリング後に実行されるので注意（パフォーマンス落ちる）

よくあるパターン

フォーム入力の監視

tsx
const [name, setName] = useState("");

useEffect(() => {
  console.log("名前が変わった:", name);
}, [name]);

コンポーネント初期化（データ取得など）

tsx
useEffect(() => {
  fetch("/api/data").then(...);
}, []);

TypeScriptならではのポイント

tsx
const [count, setCount] = useState<number>(0);

状態の型を明示することで、安全に開発できる
React.FCを使って関数コンポーネントの型も定義できる

tsx
const App: React.FC = () => {
  // ...
};

useState / useEffectを学ぶと何ができるようになるか

カウント、トグル、フォームなど動きのあるUIを作れる
API呼び出しや初期化処理など、リアルなアプリに必要な処理が書ける
状態の変化によって、Reactがどう再描画するかが見えてくる

実践に使えるサンプル

👇 サンプルアプリ

カウンター + 時計アプリ（useState / useEffect）
→ useStateでカウント管理、useEffectで現在時刻を自動更新。