1

I have a small dummy react application, I have created a "Home Page" after the user is logged on the home page context is set for user credentials from the home page and I am able to get it on the home page. but I have created another page "profile" after I change the route to profile in URL, there is no longer data. I understand that since the page is refreshed data is lost because data persistence is the job of databases. but if I have to query some common data for every page what advantage does context put on the table? thanks.

On Home Page below the code, I wrote to set user credentials.

Home.js

**const { userCredentails, setUserCredentails } = useUserContext();**

 useEffect(() => {
    const getInitialData = async () => {
      const returnData = await AuthFunction();
      if (returnData.success) {
        **setUserCredentails(returnData.user);**
        return dispatch({ type: true, userData: returnData.user });
      }
      return dispatch({ type: false });
    };
    getInitialData();
  }, []);

Now if a want to access the same data on the profile I don't want to query the database how do get it from there.

**const cntx = useContext(userCredentialsContext);**

above code returns empty objects.

finally, this is the context.js page

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

export const userCredentialsContext = createContext({});

export const UserContextProvider = ({ children }) => {
  const [userCredentails, setUserCredentails] = useState({});

  return (
    <userCredentialsContext.Provider
      value={{ userCredentails, setUserCredentails }}
    >
      {children}
    </userCredentialsContext.Provider>
  );
};

export const useUserContext = () => {
  const data = useContext(userCredentialsContext);

  return data;
};
nodeDev
  • 131
  • 1
  • 11
  • how are you redirecting to another route? is it `window.location.href = '/myRoute' ?` if thats the case, then the state variables are bound to loose data, since the whole app re-renders. If you are use router navigation provided by the router-dom API then the context can persist (unless the user refreshes the page). – Mujeeb Qureshi Apr 02 '22 at 20:29
  • Another possible approach could be to store the data in browser's `localstorage`, so instead of passing value through props, the component has to read the value from the storage. – Mujeeb Qureshi Apr 02 '22 at 20:30
  • @MujeebQureshi thanks for the reply I am using react-router-dom, it's simple a Route in BrowserRouter from react-router-Dom. – nodeDev Apr 04 '22 at 02:10

1 Answers1

1

if you implement your routing by using an anchor tag() or window.location, then the whole page will refresh including your context, setting it back to default state, the right way to do it is by using the Link tag from react-router-dom, here is an example;

import { Link } from "react-router-dom";

<Link to="/home">Home</Link>
Stickman Dev.
  • 31
  • 6
  • I was replacing the history, and facing the same issue and wondering why context was being reset. Thanks for the tip, this was the bug! – mouchin777 Jun 21 '22 at 10:09
  • This was the bug on my end too, been 2 years+ since i last wrote react. Thanks a lot for taking the time to write this –  May 13 '23 at 23:22