Sometime, we need to use the state in more than one component. Hence, we have to pass it down through
<Parent/> to <Child/> and so on. However sometime we may need to pass it down multiple level down the tree.
and sometime, there is not even a relationship between two components. Thats when react context become handy.
Consider the example below. As we select the cuisine, we have several components dependent on selected cuisine. Some of them are even deeply nested.
If, we drill down the cuisine from parents to child. It would require a lot of efforts. In some cases components are not even in direct relation with one another.
There are also high chances of errors and mistakes as we need to pass down lots of functions and states.
React context is like a pipe. Props enter at one end and exit at another without having to pass it through anywhere in between.
we need 3 things in order to use context. createContext, context provider and context consumer
To consume the props we make use of useContext()hook
Basic syntax
export const cusineContext = createContext();
<cusineContext.Provider value={{activeCuisine, activeCuisineHandler,uniqCuisines, recipesByCusine,}}>
{activeCuisine === null ? <Menu /> : <Main />}
</cusineContext.Provider>
const RecipeGrid = () => {
const { recipesByCusine } = useContext(cusineContext);
}