React Hook "useState" を Context API と使う

2024-04-02

React Hook "useState" は関数コンポーネントまたはカスタムフック内でのみ使用できます

原因

useState フックは、コンポーネントの状態を管理するために使用されます。React 16.8 以降では、関数コンポーネント内で状態を管理するために useState フックを使用する必要があります。

解決策

このエラーを解決するには、以下のいずれかの方法で useState フックを使用する必要があります。

関数コンポーネント内で useState フックを使用する

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

カスタムフックを作成して useState フックを使用する

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

  function handleClick() {
    setCount(count + 1);
  }

  return {
    count,
    handleClick,
  };
}

function App() {
  const { count, handleClick } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

以下のリソースを参照して、useState フックと React フックの使用方法について詳しく学ぶことができます。

補足

このエラーメッセージは、useState フック以外にも、useEffect フックなどの他の React フックを使用する場合にも発生する可能性があります。
フックは、React 関数コンポーネントまたはカスタムフック内でのみ使用できます。通常の JavaScript 関数内では使用できません。

関数コンポーネント

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

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

カスタムフック

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

  function handleClick() {
    setCount(count + 1);
  }

  return {
    count,
    handleClick,
  };
}

function App() {
  const { count, handleClick } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

説明

useState フックを使用して、count という状態変数と、その状態変数を更新するための setCount 関数を初期化します。
handleClick 関数は、count 状態変数を 1 増加させます。
render 関数は、現在の count 状態変数の値と、handleClick 関数を呼び出すボタンをレンダリングします。

useCounter というカスタムフックを作成します。
useCounter フックは、count 状態変数と、handleClick 関数を返します。

実行

上記のサンプルコードを実行すると、ブラウザに以下の内容が表示されます。

Count: 0

ボタンをクリックすると、count 状態変数が 1 増加し、以下の内容が表示されます。

Count: 1

useState フックは、React 関数コンポーネントまたはカスタムフック内で状態を管理するために使用できます。

useState フックを使用するその他の方法

React 16.8 以前では、クラスコンポーネント内で this.state を使用して状態を管理していました。

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    );
  }
}

状態管理ライブラリ

Redux などの状態管理ライブラリを使用して、コンポーネント間の状態を共有することもできます。

import React, { connect } from 'react-redux';

function App({ count, handleClick }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

const mapStateToProps = state => ({
  count: state.count,
});

const mapDispatchToProps = dispatch => ({
  handleClick: () => dispatch({ type: 'INCREMENT_COUNT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

Context API を使用して、コンポーネントツリー全体で状態を共有することもできます。

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

const CountContext = createContext();

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

  return (
    <CountContext.Provider value={{ count, setCount }}>
      <Child />
    </CountContext.Provider>
  );
}

function Child() {
  const { count } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}