Auth implementation with React useContext (with firebase) - Hemantsaraf08/rollingstones GitHub Wiki

Why context API or useContext?

==> 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

component tree

Context for app : these are data/state used by most of the components in app like theme, auth and language settings ==> 3 steps

  1. create Context ==> with a name for context and default value Ex: nameofContext=React.createContext('defaultValue')
  2. Provide context value ==> wrap in provider ==> wraps all children comp for which value attribute is provided by context.Provider
  3. 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

  1. create a context and export it
  2. 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

  1. We also use another local state called loading
⚠️ **GitHub.com Fallback** ⚠️