React の useDelayedState フック

ReactReactBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、ReactにおけるuseDelayedStateフックを使って、特定の条件が満たされるまで状態付き値の作成を遅らせる方法を学びます。このフックは、状態付き値を作成する前にデータやpropsの読み込みを待つ必要がある場合に便利で、アプリケーションのパフォーマンスを向上させるのに役立ちます。実際のサンプルを通じて、このフックをどのように実装するか、およびReactコンポーネントで状態付き値を更新するためにどのように使うかを見ていきます。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/state_lifecycle("State and Lifecycle") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/FundamentalsGroup -.-> react/list_keys("Lists and Keys") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38380{{"React の useDelayedState フック"}} react/state_lifecycle -.-> lab-38380{{"React の useDelayedState フック"}} react/event_handling -.-> lab-38380{{"React の useDelayedState フック"}} react/list_keys -.-> lab-38380{{"React の useDelayedState フック"}} react/hooks -.-> lab-38380{{"React の useDelayedState フック"}} react/use_state_reducer -.-> lab-38380{{"React の useDelayedState フック"}} end

React useDelayedStateフック

VM内には既にindex.htmlscript.jsが用意されています。一般的には、script.jsstyle.cssにのみコードを追加すればよいです。

条件が満たされるまで状態付き値の作成を遅らせるには、次の手順に従います。

  1. useState()フックを使って、実際のstateとブール値loadedを含む状態付き値を作成します。
  2. conditionまたはloadedが変更された場合に状態付き値を更新するために、useEffect()フックを使います。
  3. 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でさらに多くの実験を行って練習してください。