React フック: useContext()

React フックとは
これらは React の関数であり、関数ベースのコンポーネントに反応機能を追加できるようにします.

useContext フックとは何ですか?
このフックは、状態を効率的にコンポーネント チェーンに渡すために使用されます.プロペラ掘削は歴史的にこれを行うために使用されてきました.プロップ ドリルは、コンポーネント チェーンの奥深くにあるプロップとして状態値を渡すプロセスです.多くの場合、これにより、プロパティを必要としないコンポーネントにプロパティが渡されます. useContext フックを使用すると、小道具をドリルダウンすることなく、状態値をコンポーネント チェーンに渡すことができます.

このフックの最適な用途は、グローバル値を子コンポーネントに渡すことです.ユースケースの例としては、アプリケーションのテーマの切り替え、およびユーザー情報 (ユーザー ID、ユーザー名など) のログインがあります.このフックは、状態管理ライブラリ Redux の代替としては推奨されません.現在、Redux のユースケースの多くを処理できるほど堅牢ではありません.このフックは、グローバルに使用される状態の一部しか持たない小さなアプリケーションに最適です.
構文は一般的なパターンに従います.

import { createContext, useContext } from "react";

//Initialize our context. 
//null is the default value if none are later provided.
//Often this is done in a different file.
const UserContext = createContext(null)

const ParentComponent = () => {
  //We wrap our children component in the Provider 
  return (
    <UserContext.Provider value={'Aden'}>
      <ChildComponent />
    </UserContext.Provider>
  );
};

const ChildComponent = () => {

  //Access the context passed down from the ParentComponent
  const user = useContext(UserContext)
  return (
    <>
      <h1>Child Component</h1>
      <p>{user}</p>
    </>     
  );
};

export default ParentComponent;

useEffect および useState フックを使用した例を次に示します.

import { useState, useEffect, createContext, useContext } from "react";

const UserContext = createContext(null)

const App = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {

      //Fetches a list of ten users
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/users"
      );

      // If the HTTP status code is 200-299
      if (response.ok) {
        const json = await response.json();
        setUsers(json);
      }
    };

    fetchData();
  }, []);

  return (
    <UserContext.Provider value={users}>
      <ChildComponent1 />
    </UserContext.Provider>
  );
};

const ChildComponent1 = () => {

  //This component does not need the users data
  return (
    <>
      <h1>ChildComponent1</h1>
      <ChildComponent2 />
    </>

  )
}

const ChildComponent2 = () => {

  const users = useContext(UserContext)

  return (
    <div>
      <ul>
        {/*If the data exists, display a list of 
        users names*/}
        {users &&
          users.map((user) => {
            return <li key={user.id}>{user.name}</li>;
          })}
      </ul>
    </div>
  )
}

export default App;

useContext の詳細については、React ドキュメントを参照してください: https://reactjs.org/docs/context.html

質問やフィードバックがある場合は、コメントを残してください.