useStateからuseEffectまで簡単に説明

ReactのuseStateとuseEffectは、関数コンポーネントで状態管理と副作用（サイドエフェクト）の処理を行うためのフックです。これらはReact 16.8で導入され、クラスコンポーネントなしで状態やライフサイクルフックに似た機能を使えるようにしました。

useState
useStateは、関数コンポーネント内で状態を持つためのフックです。このフックを使うことで、コンポーネント内で保持される値（状態）と、その値を更新する関数を提供します。使い方は非常にシンプルで、初期状態をuseStateの引数として渡すことで状態を定義します。このフックからは、状態の現在値とそれを更新する関数のペアが返されます。

javascript
Copy code
const [count, setCount] = useState(0);
この例では、countが状態の現在値で、setCountがその状態を更新する関数です。setCount関数を呼び出すことでcountの値を更新でき、更新が発生するとコンポーネントは再レンダリングされます。

useEffect
useEffectは、関数コンポーネント内で副作用を扱うためのフックです。副作用とは、データのフェッチ、購読の設定、手動でのDOMの変更など、コンポーネントのレンダリング結果に影響を与える操作のことを指します。useEffectは、コンポーネントのレンダリングが完了した後に実行される関数を定義することができます。

javascript
Copy code
useEffect(() => {
document.title = You clicked ${count} times;
});
この例では、コンポーネントがレンダリングされるたびにブラウザのタイトルを更新しています。useEffectはデフォルトでレンダリングの後の毎回実行されますが、第二引数に配列を渡すことで、実行条件を細かく制御することができます。配列内に指定した値が変更された時のみ、useEffect内の関数が実行されます。

javascript
Copy code
useEffect(() => {
document.title = You clicked ${count} times;
}, [count]); // ここで指定したcountが変わった時だけ実行される
useStateとuseEffectは、関数コンポーネントで状態管理と副作用の処理を行うための基本的なフックです。これらを利用することで、より宣言的かつ効果的にUIのロジックを構築することが可能になります。