Using context to store variable globally React.js

Question

I want to store a global variable that's mutable and accessible in all files of my React.js project, including index.js where the ApolloClient is rendered. At first, I thought to create a class but I wasn't sure how to implement that and save the state of the variable across multiple pages. Upon doing research, I discovered the use of context, but I don't quite understand the documentation. Please advise what the best practice would be. Thank you.

Edit:

I attempted to import a global variable, but that isn't mutable. I also attempted making a class that extends React.Component, to access functionalities such as useState() but a class of that nature must return a component if I understand correctly. Upon reading into Context more, I'm starting to gain a little more understanding, but I still don't fully understand how to implement it.

I created a file AuthHandler:

import { createContext } from 'react';

export var AuthData = {
    id: createContext(0),
    auth: createContext("")
}

I want to mutate that data in a component function, and then access it in index.js. How would I go about doing that?

Answer 1

Your use case here will be consumed by something outside of React (an Apollo Link), so Context does not make any sense here - Context would make a value available to children in the React tree, but your link is not a child in a React Tree.

Instead you can just export an object and modify that object (you probably cannot reassign it depending on how you import/export it, but you can always modify it).

// index.js
export const globalData = {
  auth: null
}

// anywhere else
import { globalData } from './index.js'

globalData.auth = "foo"

That said, you can only work with global data like this if you are not using SSR. If you are using SSR (e.g. in a Client Component in Next.js), you'd need to find another way of doing that.

In that case, you could use Apollo CLient's defaultContext.

Answer 2

if u want to store a variable globally u can use context api or redux-tool kit here i am giving a rough idea how u can achieve this using context API first Create A folder usually context.. inside this create a file usually name as DataProvider.jsx and do thing like this

import { createContext, useState } from 'react';

export const DataContext = createContext(null);

const DataProvider = ({ children }) => {

const [Client, setClient] = useState([]);


return (
    <DataContext.Provider value={{
       Client, setClient
    }}
    >
        {children}
    </DataContext.Provider>
)

}

export default DataProvider; 

next step u should wrap your app.js like this

import DataProvider from './context/DataProvider';

   function App() {
   return (
   <DataProvider>
     <Home />
   </DataProvider>
   );
}


export default App;

now u can setclient or u can use client data like below

assume u have a file name Client.jsx where u want to set the client data

const { setCleint} = useContext(DataContext)

set the Client data to setClient just as normal state now in similar way u can render the client list anywhere like this

const { Cleint} = useContext(DataContext);