Reactで学ぶHooksの基本

Reactは、JavaScriptで構築されたフロントエンドのライブラリであり、開発者が簡単に動的なUIを構築できるようにするために設計されました。Reactには多くの機能があり、そのうちの1つがHooksです。

Hooksは、React v16.8で導入された新しい機能であり、クラスコンポーネントを使用せずに状態とライフサイクルメソッドを処理するために使用されます。この記事では、React Hooksの基本について説明します。

useState

useStateは、関数コンポーネントで状態を追跡するための方法です。以下のコードでは、useStateを使用してcount変数を追跡しています。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useStateは、count変数とsetCount関数を返します。count変数は現在の状態を表し、setCount関数は新しい状態を設定するために使用されます。

useEffect

useEffectは、関数コンポーネントでライフサイクルメソッドをエミュレートするための方法です。以下のコードでは、useEffectを使用してページのタイトルを更新しています。

import React, { useState, useEffect } from 'react';

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

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffectは、レンダリング後に実行されます。count変数が変更された場合、useEffectは再度実行されます。

useContext

useContextは、コンポーネントのプロパティを多くのコンポーネントで共有するための方法です。以下のコードでは、useContextを使用してテーマを共有しています。

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return (
    <div>
      <p>Current theme: {theme}</p>
    </div>
  );
}

まとめ

この記事
では、React Hooksの基本的な機能であるuseState、useEffect、useContextについて説明しました。これらのHooksは、クラスコンポーネントを使用することなく、関数コンポーネント内で状態管理やライフサイクルの処理を行うことができます。

React Hooksは、コンポーネントの再利用性を高め、コードの可読性を向上させることができます。これらのHooksを使いこなすことで、より効率的かつシンプルなReactコンポーネントを構築することができます。

それでは、React Hooksの基本について学び、ご覧いただきありがとうございました。