React 状態変化を画面に反映する基本の仕組み

## 1. useState – 値の保存と更新

const [count, setCount] = useState(0);

🧠 `useState`のイメージとしては——

- React側で追跡される「値」、ここでは`count`みたいなものが生まれる。

- そして`setCount`という関数で値を変えれば、その瞬間UIも勝手に新しくなる。不思議だけど本当なんだよね。実は、裏でこっそり全部面倒見てくれてるらしい…いや、それでもたまにバグ出たりするから油断禁物だけど。

## 2. useEffect - マウント時、更新時、アンマウント時にコードを実行

<pre><code class="language-python">javascript

useEffect(() => {

  console.log("Component mounted");

javascript

const value = useContext(MyContext);

例：

- テーマ（たとえば `dark` や `light`）が存在する場合。

- それを全部のコンポーネントに一々渡さず、とりあえず**Context**へ保存してしまう。

- そして任意のコンポーネント側では `useContext(ThemeContext)` を叩けば今のテーマ状態が取得できる。……むろん細かい注意点はいろいろあるんだけど、その話はまたいつか気分次第で。

javascript

const inputRef = useRef(null);

<pre><code class="language-html"><input ref={inputRef

実はね、**重い関数**が毎回走るのは、正直やめてほしいって気持ちになることが多い。useMemoを使えば、その結果をキャッシュできるわけ。ああ、コードを書く手が止まる瞬間あるよね。  javascript

const result = useMemo(() => expensiveFunction(data), [data]);



さて、ここで🧠 `useMemo`というのは、**負荷の高い計算結果を保存するためのフック**なんだよな。Reactがコンポーネントを再レンダーするたびに毎回再計算されないようになっている（これ、地味だけど助かる）。あっ、別の話をしそうになったけど、とりあえず続ける。

yaml

- `expensiveFunction(data)`は、**`data`が変わったときだけ発動される**んだよ。だから毎回レンダー時に動くってわけじゃない。

- この仕組みのおかげで、アプリケーションのパフォーマンス維持とか効率アップにつながったりもする…らしい。

javascript

const handleClick = useCallback(() => {

  console.log("Clicked");

}, []);

## 7. useReducer - 複雑な状態ロジック向け（useStateとの比較）

複雑だったり複数の状態値管理にはuseReducerが適している—と一応言われているけど、自分でもほんとうか？と思いながら結局いつもuseStateばっかり使ってしまう癖が抜けない…。えーと、それで、useReducerはreducer関数というものを書いて、その中でstateとactionから新しいstateを返す形になるんだよね。一瞬難しく見えるし慣れるまで抵抗感強めだけど、一度ハマれば「ああこれしか無理」というケースも確実に存在する。

const [state, dispatch] = useReducer(reducer, initialState);  

えっとね、useReducerっていうのはuseStateとちょっと似てるんだけど、なんだろう…複雑な状態管理をしたいときによく使われるんだよ。今思えば、たぶん開発者は「stateが増えて頭がぐちゃぐちゃになる」経験、絶対してるよね。ま、それはさておき…。</code></pre>

useLayoutEffectって、うーん…まあuseEffectに似てるんだけど、なんかこう、微妙に違うタイミングで動くやつなんだよね。DOMが組み立てられた直後、つまり描画されるその一瞬前に走る感じ。あ、でもちょっと話がそれるけど、この「描画前」って本当に体感できないくらい一瞬のことだから、ピンとこない人も多いかも…。ま、とりあえずmain point戻すと——レイアウトの計測とか、DOMの細かい操作をしたいときに出番が来る。</code></pre>

javascript

useLayoutEffect(() => {

  console.log("Runs before paint");

}, []);

🧠 useLayoutEffectはuseEffectよりもちょっと早めのタイミングで動く。DOMが更新された直後で、ブラウザがまだ見た目を描画する前っていう絶妙な間合い。でもさ、それだけじゃなくて——例えば幅や高さを測りたい時とか？レンダリング直後にDOMスタイルを即座に調整したい場合にも便利だったりする。本当に必要なのかな…って毎回疑問にはなるけどね。でもまあ、人によっては結構重宝してるっぽい。

<pre><code class="language-javascript">これね、`useEffect`ともよく似ているけれど実際はもっと速く動いていて、そのせいでブロッキング的になることもある（つまりこのフック内の処理が終わらない限りユーザーには何も表示されない）。だから普通は`useEffect`じゃ遅すぎる！という時だけ使った方が良いみたい。いやほんと、この差を意識し始めると地味につかれる…。ま、ともかくそんな感じ。

useImperativeHandle(ref, () => ({

  focus: () => inputRef.current.focus(),

- **useState ~** 状態管理

- **useEffect ~** 副作用処理

- **useContext ~** グローバルデータへのアクセス

- **useRef ~** DOMや永続的な値の保持

- **useMemo ~** 値のメモ化

- **useCallback ~** 関数のメモ化

- **useReducer ~** 複雑な状態ロジック

- **useLayoutEffect ~** 描画前のDOM測定

- **useImperativeHandle ~** カスタムref動作

- **useDebugValue ~** カスタムフックのデバッグ