はじめに
この実験では、ReactにおけるuseDelayedState
フックを使って、特定の条件が満たされるまで状態付き値の作成を遅らせる方法を学びます。このフックは、状態付き値を作成する前にデータやpropsの読み込みを待つ必要がある場合に便利で、アプリケーションのパフォーマンスを向上させるのに役立ちます。実際のサンプルを通じて、このフックをどのように実装するか、およびReactコンポーネントで状態付き値を更新するためにどのように使うかを見ていきます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、ReactにおけるuseDelayedState
フックを使って、特定の条件が満たされるまで状態付き値の作成を遅らせる方法を学びます。このフックは、状態付き値を作成する前にデータやpropsの読み込みを待つ必要がある場合に便利で、アプリケーションのパフォーマンスを向上させるのに役立ちます。実際のサンプルを通じて、このフックをどのように実装するか、およびReactコンポーネントで状態付き値を更新するためにどのように使うかを見ていきます。
VM内には既に
index.html
とscript.js
が用意されています。一般的には、script.js
とstyle.css
にのみコードを追加すればよいです。
条件が満たされるまで状態付き値の作成を遅らせるには、次の手順に従います。
useState()
フックを使って、実際のstate
とブール値loaded
を含む状態付き値を作成します。condition
またはloaded
が変更された場合に状態付き値を更新するために、useEffect()
フックを使います。loaded
が真の場合にのみstate
値を更新する関数updateState
を作成します。const useDelayedState = (initialState, condition) => {
const [{ state, loaded }, setState] = React.useState({
state: null,
loaded: false
});
React.useEffect(() => {
if (!loaded && condition) setState({ state: initialState, loaded: true });
}, [condition, loaded]);
const updateState = (newState) => {
if (!loaded) return;
setState({ state: newState, loaded });
};
return [state, updateState];
};
ここでは、useDelayedState
フックを使う方法の例を示します。
const App = () => {
const [branches, setBranches] = React.useState([]);
const [selectedBranch, setSelectedBranch] = useDelayedState(
branches[0],
branches.length
);
React.useEffect(() => {
const handle = setTimeout(() => {
setBranches(["master", "staging", "test", "dev"]);
}, 2000);
return () => {
handle && clearTimeout(handle);
};
}, []);
return (
<div>
<p>Selected branch: {selectedBranch}</p>
<select onChange={(e) => setSelectedBranch(e.target.value)}>
{branches.map((branch) => (
<option key={branch} value={branch}>
{branch}
</option>
))}
</select>
</div>
);
};
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
右下隅の「Go Live」をクリックして、ポート8080でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。
おめでとうございます!あなたはReactのuseDelayedStateフックの実験を完了しました。あなたの技術を向上させるために、LabExでさらに多くの実験を行って練習してください。