Auth implementation with React useContext (with firebase) - Hemantsaraf08/rollingstones GitHub Wiki
==> problem is prop drilling as it leads to re-rendering of every child component (whether they are subscribed to that state or not) if state changes in parent component
Context for app : these are data/state used by most of the components in app like theme, auth and language settings ==> 3 steps
- create Context ==> with a name for context and default value Ex: nameofContext=React.createContext('defaultValue')
- Provide context value ==> wrap in provider ==> wraps all children comp for which value attribute is provided by context.Provider
- useContext ==> consume context in react functional comp. Ex: valuePassed/obtained=useContext(nameofContext)
Setting Context for our app ==> whole point is that AuthContext.Provider needs value which is the state of AuthProvider Function
- create a context and export it
- make an AuthProvider Functional comp that takes children as parameters ==> children
//wrapper component
"componentWrapper"
child1
child2
"componentWrapper"
// the components child1 & child2 can be used using props.children in component's functional component
3. CurrentUser is the state of AuthProvider fn. ==> this is the shared data by all the child comp. of AuthProvider
- We also use another local state called loading