Reactフックの基礎：useStateとuseEffectを徹底解説

この記事では、Reactフックの基本であるuseStateとuseEffectについて解説します。useStateを使った状態管理や、useEffectを活用した副作用の処理を理解し、Reactアプリケーションで効率的に状態と副作用を管理する方法を学びましょう。

フックとは？useStateの基本

Reactフックは、関数コンポーネントで状態管理やライフサイクルの処理を行うための機能です。`useState`を使うことで、関数コンポーネントでも状態を持たせることができます。

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

useStateを使った状態管理の例

useStateを使って、ボタンをクリックするたびにカウントが増加する簡単な状態管理の例を見てみましょう。

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

    return (
      

        
You clicked {count} times
         setCount(count + 1)}>
          Click me
        
      
    );
  }
  

useEffectを使った副作用の処理方法

useEffectは、副作用（例えばデータのフェッチやDOMの操作）を処理するためのフックです。例えば、コンポーネントがレンダリングされた後にAPIからデータを取得する場合に使用します。

  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);
  

Reactフックの基礎：useStateとuseEffectを徹底解説のまとめ

この記事では、ReactのフックであるuseStateとuseEffectについて学びました。状態管理と副作用の処理を理解し、Reactアプリケーションで効率的にこれらの機能を活用していきましょう。