React useContext – wait for api to finish

const tableContext = React.createContext();
const tableContextProvider = ({children}) => {
   const [isTableOne, setTableOne] = useState(false);
   const [isTableTwo, setTableTwo] = useState(false);

   useEffect(() => {
       setTableValues();
   }, []);

   function setTableValue() {
       // api call returns result
       setTableOne(result.IS_TABLE_ONE); // true
       setTableTwo(result.IS_TABLE_TWO); // false
   }

   return (<TableContext.Provider value={{isTableOne, isTableTwo}}>{children}</TableContext.Provider>);
};

In a different component, the result shows:

{isTableOne:false, isTableTwo:false}
{isTableOne:true, isTableTwo:false}

It returns two objects and it takes some time to return the second one. How could I make it wait and only return the last result?

1 thought on “React useContext – wait for api to finish”

Leave a Comment