Setting React Context with Asynchronous API Call | Troubleshooting Child Component Display Issue

Set the data in React Context from asynchronous API call

If you’re working on a React project and need to initialize a custom context with data from a backend API, you may run into issues when the context gets loaded before the API call finishes fetching the data. In this blog post, we’ll explore a solution to this problem by setting the data in React Context from an asynchronous API call.

The Problem

By default, when creating a React context, you can set an initial value that will be used until the actual data is fetched. However, if you try to access the context value inside a child component, you’ll only get the default value before the API call finishes.

The Solution: Use of useContext and useEffect

To overcome this issue, you can utilize the useContext and useEffect hooks provided by React. The useContext hook allows us to access the context value within a component, and the useEffect hook enables us to fetch the data asynchronously.

Here’s an example of how you can set the data in React Context from an asynchronous API call:

import React, { useState, useEffect, useContext } from "react";
import { callAffiliateApi } from "./services/affiliateService/transactionContext";

const Context = React.createContext({});
const AffiliateContext = useContext(Context);

export const AffiliateProvider = ({ children }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const newText = await callAffiliateApi();
      setData(newText);
    };
    fetchData();
  }, []);

  return (
    <AffiliateContext.Provider value={{ data }}>
      {children}
    </AffiliateContext.Provider>
  );
};

With the above code, we have created a custom React context using useContext and provided the fetched data as the context value. Now, the child components can access the actual data instead of the default value.

Accessing Data in a Child Component

To access the data in a child component, you can use the useContext and AffiliateContext.Consumer components. Here’s an example of how it can be done:

import { AffiliateContext } from "../../../../AffiliateContext";

class Profile extends Component {
  render() {
    return (
      <AffiliateContext.Consumer>
        {({ data }) => (
          <div>
            {data}
          </div>
        )}
      </AffiliateContext.Consumer>
    )
  }
}

export default Profile;

In the above code snippet, we’re utilizing the AffiliateContext.Consumer component to access the context value within the child component. By deconstructing the value object, we can access the actual data fetched from the API.

Conclusion

By using the useContext and useEffect hooks provided by React, we can efficiently set the data in React Context from an asynchronous API call. This ensures that the child components wait until the data finishes fetching before accessing it. Make sure to implement these techniques in your React projects when dealing with contexts that rely on asynchronous data.

And that’s it! You’ve learned how to set the data in React Context from an asynchronous API call. Now you can ensure that your React components have access to the most up-to-date data without running into synchronization issues.

reference : 

reactjs