Troubleshooting Updating React Context with REST API Call in a Functional Component

Update React Context using a REST API call in a functional component

Are you struggling to update the context of a React app using data from an API call to a REST API?
In this blog post, we will explore how to synchronize your function and successfully update the context in a functional component using React Hooks and the useContext hook.

Understanding the Problem

The first step in solving this issue is to identify why your current implementation is not working. It seems that you have tried using the code provided in a Medium blog post, but it didn’t work in your case.

import React, { useEffect, useState } from "react";
import axios from "axios";

var text = "Test";

fetch(process.env.REACT_APP_TEXT_API)
    .then(res => res.json())
    .then(json => {
        text = json;
    })

const TextContext = React.createContext(text);
export const TextProvider = TextContext.Provider;
export const TextConsumer = TextContext.Consumer;

export default TextContext;
    

The issue with the above code is that you are directly assigning the value of “text” outside the fetch request, which means the context will not be updated when the API call is resolved.
Additionally, you are using the variable “text” as the initial value of the context, instead of using the fetched data.

Solution: Updating the Context

To properly update the context with data from the API call, you need to modify the value of the context inside the Provider component.
Here’s an updated version of the code:

import React, { useEffect, useState } from "react";

export const TextContext = React.createContext();
export const TextProvider = ({ children }) => {
    const [text, setText] = useState(null);

    useEffect(() => {
        fetch(process.env.REACT_APP_TEXT_API)
            .then(res => res.json())
            .then(json => {
                setText(json);
            });
    }, []);

    return (
        <TextContext.Provider value={text}>
            {children}
        </TextContext.Provider>
    );
};
    

In the updated version, we define the TextProvider component and use the useState and useEffect hooks. Inside the useEffect hook, we perform the API call and set the fetched data using the setText function provided by useState.
By providing the “text” state as the value of the context, any child component that consumes the context using the useContext hook will have access to the updated data.

Accessing the Context

Now that we have properly updated the context, let’s see how to access the data in a functional component.

import React, { useContext } from "react";
import { TextContext } from "../../../../services/textService/textContext";

function Profile() {
    const text = useContext(TextContext);

    return (

<div>
            
Text: {text}
</div>

    );
}
    

In the Profile component, we import the TextContext and use the useContext hook to access the data from the context.
By calling useContext with the TextContext as an argument, we can retrieve the text value from the context and use it in our component.

Conclusion

Updating the context of a React app using data from an API call is achievable by properly using React Hooks and the useContext hook.
Make sure to modify the value of the context inside the Provider component and use the useContext hook to access the context data in your components.

reference : 

reactjs