xxxxxxxxxx
// ---------------- Parent.js
import {createContext , useState} from "react";
let contextName = createContext( ) // you can optionally pass it a default value // it returns a "provider" object
let Parent = () => {
let [count , setCount] = useState() // returns an [ state variable , state setter fn]. you can pass useState() a default value too
// the stateSetter function is async
return (
<div>
<contextName.Provider value={ {count , setCount } } > // you can send multiple things across to the consumers by adding them in a single object
<B/>
</contextName.Provider>
</div>
)
}
export {contextName};
export default Parent;
// file that consumes the context
// --------- Child.js -----------
import {useContext} from "react"; // import the useContext hook that will allow you to actually use the created and imported context
import {contextName } from "./Parent"; // import the particular context that you want to use
let Child = () => {
let value = useContext(contextName);
return (
<div> {value} </div>
)
}
xxxxxxxxxx
//React context allows us to pass data to our component tree without using props.
To use Context, we use the createContext function from React.
The created context includes a Provider and a Consumer property, which are each components.
We wrap the Provider around the component tree that we want to pass
the given value down.
Next, we place the Consumer in the component we want to consume the value.
import { createContext } from 'react';
const NameContext = createContext('');
function App() {
return (
<NameContext.Provider value="John Doe">
<Body />
<NameContext.Provider>
);
}
function Body() {
return <Greeting />;
}
function Greeting() {
return (
<NameContext.Consumer>
{name => <h1>Welcome, {name}</h1>}
//we got function with name argument which we will use
</NameContext.Consumer>
);
}
//using useContext hook
rewrite our example from earlier, using the useContext hook:
import { createContext, useContext } from 'react';
const NameContext = createContext('');
function App() {
return (
<NameContext.Provider value="John Doe">
<Body />
<NameContext.Provider>
);
}
function Body() {
return <Greeting />;
}
function Greeting() {
const name = useContext(NameContext);
//useContext with name of context
return (
<h1>Welcome, {name}</h1>
);
}
xxxxxxxxxx
import React, { createContext, useReducer } from "react";
import reducer, { initialState } from "./reducer";
export let todoContext = createContext({});
export default function Provider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState);
const values = {
state,
dispatch
};
return (
<>
<todoContext.Provider value={values}>
{children}
</todoContext.Provider>
</>
);
}
xxxxxxxxxx
// Theme context, default to light theme
const ThemeContext = React.createContext('light');
// Signed-in user context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;
// App component that provides initial context values
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
// A component may consume multiple contexts
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}
context is just a set of variables and functions, you will use context if multiples files needs the same variables or functions and when multiple of react component needs the same variables or functions
for me the best tool for context/state management is recoil.js, ohh i don't know if it is just recoil but UI/UX loading is faster if you set the data to state before you populate.