React コンポーネントの状態を永続的に保存：localStorage、Context、カスタムフックの比較
JavaScript と ReactJS における React コンポーネントの状態の保持
しかし、場合によっては、コンポーネントがアンマウントされても、状態の一部を保持したい場合があります。例えば、フォーム入力値やユーザー設定などを保持したい場合などです。
この問題を解決するために、いくつかの方法があります。
localStorage は、ブラウザにデータを永続的に保存できる API です。React コンポーネントの状態を localStorage に保存することで、コンポーネントがアンマウントされても状態を保持することができます。
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const storedCount = localStorage.getItem('count');
if (storedCount) {
setCount(parseInt(storedCount));
}
}, []);
const handleIncrement = () => {
setCount(count + 1);
localStorage.setItem('count', count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
export default MyComponent;
Context は、React アプリケーション全体でデータを共有するための仕組みです。React コンポーネントの状態を Context に保存することで、コンポーネントがアンマウントされても状態を保持することができます。
import React, { useContext, useState } from 'react';
const CountContext = React.createContext();
const MyComponent = () => {
const { count, setCount } = useContext(CountContext);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
const App = () => {
const [count, setCount] = useState(0);
return (
<CountContext.Provider value={{ count, setCount }}>
<MyComponent />
</CountContext.Provider>
);
};
export default App;
カスタムフックを作成する
カスタムフックは、再利用可能な React 状態ロジックを作成するための方法です。React コンポーネントの状態を保持するためのカスタムフックを作成することで、コンポーネントがアンマウントされても状態を保持することができます。
import React, { useState } from 'react';
const useCount = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return { count, setCount, handleIncrement };
};
const MyComponent = () => {
const { count, setCount, handleIncrement } = useCount();
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
export default MyComponent;
これらの方法はそれぞれ異なる利点と欠点があります。状況に合わせて最適な方法を選択してください。
localStorage を使用する
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const storedCount = localStorage.getItem('count');
if (storedCount) {
setCount(parseInt(storedCount));
}
}, []);
const handleIncrement = () => {
setCount(count + 1);
localStorage.setItem('count', count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
export default MyComponent;
Context を使用する
import React, { useContext, useState } from 'react';
const CountContext = React.createContext();
const MyComponent = () => {
const { count, setCount } = useContext(CountContext);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
const App = () => {
const [count, setCount] = useState(0);
return (
<CountContext.Provider value={{ count, setCount }}>
<MyComponent />
</CountContext.Provider>
);
};
export default App;
カスタムフックを作成する
import React, { useState } from 'react';
const useCount = () => {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return { count, setCount, handleIncrement };
};
const MyComponent = () => {
const { count, setCount, handleIncrement } = useCount();
return (
<div>
<p>カウント: {count}</p>
<button onClick={handleIncrement}>インクリメント</button>
</div>
);
};
export default MyComponent;
これらのサンプルコードは、それぞれの方法の基本的な使い方を示しています。実際のアプリケーションでは、状況に合わせてコードをカスタマイズする必要があります。
React コンポーネントの状態を保持するその他の方法
Redux を使用する
Redux は、JavaScript アプリケーションにおける状態管理のためのライブラリです。Redux を使用すると、React コンポーネントから独立した状態でデータを保存し、アプリケーション全体で共有することができます。
MobX を使用する
MobX は、状態管理のためのもう 1 つの JavaScript ライブラリです。MobX は、オブザーバブルな状態管理を提供し、状態の変化に応じて自動的にコンポーネントを更新することができます。
URL パラメータを使用する
コンポーネントの状態を URL パラメータに保存することができます。これは、シンプルなコンポーネントの状態を保持する場合に役立ちます。
const MyComponent = ({ count }) => {
return (
<div>
<p>カウント: {count}</p>
</div>
);
};
const App = () => {
return (
<div>
<MyComponent count={10} />
<MyComponent count={20} />
</div>
);
};
export default App;
フォームの入力値は、ブラウザの履歴に保存することができます。これは、フォームに入力されたデータを次回コンポーネントがレンダリングされるときに復元する場合に役立ちます。
const MyComponent = () => {
const [name, setName] = useState('');
const handleChange = (event) => {
setName(event.target.value);
};
return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>名前: {name}</p>
</div>
);
};
export default MyComponent;
javascript reactjs
