React Context API

According to the React docs, Context API provides a way to pass data through the component tree from parent to child components, without having to pass props down manually at each level. This new API solves one major problem–prop drilling

import React, { createContext } from 'react'
import useFirebase from '../hooks/useFirebase'
export const AuthContext=createContext()
function AuthProvider({children}) {
    const allContext=useFirebase()
    return (
        <AuthContext.Provider value={allContext}>
            {children}
        </AuthContext.Provider>
    )
}

export default AuthProvider


React context API: How it works?

For creating context you need to call createContext(). It returns a consumer and a provider component. The createContext function accepts an initial value, but this initial value is not required.

export const AuthContext=createContext()

Provider: 

Provider component is used to wrap components. 

<AuthContext.Provider value={allContext}>
            {children}
 </AuthContext.Provider>

The Provider component receives a prop called value it's like a store in redux, which can be accessed from all the components that are wrapped inside Provider.

finally, export default AuthProvider

AuthProvider we will use for wrapping app.js wrapped all component