2. Context Hooks: useContext

Details
Parent Category: React

 

Problem

For highly nested components and subcomponents one needs to pass down data from the top component.

 

Solution

Create a context around the main component.

The sub components can then get the data without clutter

 

const AppContext = createContext()

const [blah, setBlah] = useState(0)


<AppContext.Provider value={blah, setBlah}>
   <App />

</AppContext.Provider>

 

// Child component

function Title() {
   const text = useContext( AppContext )

   return <h1>{text}</h1>

}