01/05/2021 - react context

react context

useful for local context, quick and dirty method, especially when you are not the one setting up the global state

//react component (parent)
export const mycontext = react.createcontext();
const xxx =() =>{ 
const value = value

//usecontext and usestate

//if you declare usestate getters and setters in the parent component, you can still pass them into the context

//some people prefer to do it in a separate file but make sure the consumers are in accordance to the tree structure, i prefer to just pass it in the parent component

return
<MyContext.Provider value={value}><div><div></MyContext.Provider value={value}>

//react component (child)
import {MyContext} from './parent component'
const xxx =()=>{
const value = React.useContext()
const {field, field, field}= value;
... you can use the values now

caveats

according to react 

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

the word tree means the consumer components need to be part of the tree

else, those you have to do some prop drilling and pass in the value prop