useState、useEffect、useRef：React.jsで状態変化を監視する3つの方法

2024-04-02

React.jsで状態変化を監視する方法

状態変化を監視するには、いくつかの方法があります。

useState Hookは、コンポーネントの状態を管理するために使用されます。useState Hookは、現在の状態と状態更新関数を含む配列を返します。状態更新関数を呼び出すと、コンポーネントが再レンダリングされます。

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

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

return (
  <div>
    <h1>カウント: {count}</h1>
    <button onClick={handleClick}>カウントアップ</button>
  </div>
);

useEffect Hookは、コンポーネントがレンダリングされるたびに実行される関数を登録するために使用されます。useEffect Hookは、状態変化を監視するために使用できます。

useEffect(() => {
  const subscription = store.subscribe(() => {
    setCount(store.getState().count);
  });

  return () => subscription.unsubscribe();
}, []);

return (
  <div>
    <h1>カウント: {count}</h1>
  </div>
);

const countRef = useRef(0);

function handleClick() {
  countRef.current++;
  setCount(countRef.current);
}

return (
  <div>
    <h1>カウント: {count}</h1>
    <button onClick={handleClick}>カウントアップ</button>
  </div>
);

状態変化を監視するには、いくつかの方法があります。どの方法を使用するかは、要件によって異なります。

補足

状態変化を監視する必要があるコンポーネントでこれらの方法を使用できます。
状態変化を監視する必要があるコンポーネントは、状態変化を監視する必要がある他のコンポーネントの子コンポーネントである必要があります。

useState Hookを使用したサンプルコード

import React, { useState } from 'react';

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

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

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
}

export default App;

useEffect Hookを使用したサンプルコード

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

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

  useEffect(() => {
    const subscription = store.subscribe(() => {
      setCount(store.getState().count);
    });

    return () => subscription.unsubscribe();
  }, []);

  return (
    <div>
      <h1>カウント: {count}</h1>
    </div>
  );
}

export default App;

このコードでは、useEffect Hookを使用して、storeという状態管理ライブラリからの状態変化を監視しています。storeの状態が変化すると、count変数が更新されます。

useRef Hookを使用したサンプルコード

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

function App() {
  const countRef = useRef(0);

  function handleClick() {
    countRef.current++;
    setCount(countRef.current);
  }

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
}

export default App;

このコードでは、useRef Hookを使用して、countRefという参照変数を定義しています。countRef変数は、レンダリング間でカウント数を保持します。handleClick関数は、countRef変数を1増やします。

補足

これらのサンプルコードは、状態変化を監視する方法の例です。これらのコードをそのまま使用することはできません。要件に合わせてコードを変更する必要があります。

状態変化を監視する他の方法

高階コンポーネント

const withState = (Component) => {
  const [count, setCount] = useState(0);

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

  return (
    <Component
      count={count}
      onCountChange={handleClick}
    />
  );
};

const App = () => {
  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
};

const WrappedApp = withState(App);

export default WrappedApp;

このコードでは、withStateという高階コンポーネントを作成しています。withState高階コンポーネントは、countというプロパティとonCountChangeというプロパティを持つコンポーネントを返します。

Appコンポーネントは、withState高階コンポーネントによってラップされています。Appコンポーネントは、countプロパティとonCountChangeプロパティを受け取ります。

handleClick関数は、onCountChangeプロパティを使用して、count変数を1増やします。

Context APIは、コンポーネントツリー全体でデータを共有するために使用できます。Context APIを使用して、状態変化を監視することができます。

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

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

  return (
    <CountContext.Provider value={{ count, onCountChange: handleClick }}>
      {children}
    </CountContext.Provider>
  );
};

const App = () => {
  const { count, onCountChange } = useContext(CountContext);

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={onCountChange}>カウントアップ</button>
    </div>
  );
};

export default () => {
  return (
    <CountProvider>
      <App />
    </CountProvider>
  );
};