Context Example

AccountContext.js

import { createContext } from 'react'
export default createContext(null)

AccountProvider.js

import React, { useState } from 'react'
import AccountContext from '../contexts/AccountContext'

function AccountProvider({ children }) {
  const [account, setAccount] = useState(null)

  return (
    <AccountContext.Provider value={[ account, setAccount ]}>
      {children}
    </AccountContext.Provider>
  )
}

AccountProvider.propTypes = {
  children: PropTypes.node.isRequired
}

export default AccountProvider

index.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/app/App'
import AccountProvider from './providers/AccountProvider'

ReactDOM.render(
  <AccountProvider>
    <App />
  </AccountProvider>,
  document.getElementById('root')
)

MyComponent.js

import React from 'react'
import useAccount from '../hooks/useAccount'

function MyComponent() {
  const [account, setAccount] = useAccount()
  return <div>{account ? account.firstName : 'No Account'}</div>
}

export default MyComponent

useAccount.js

import { useContext } from 'react'
import AccountContext from '../contexts/AccountContext'

function useAccount() {
  const value = useContext(AccountContext)
  if (value === null)
    throw new Error('<AccountProvider> is not in the parent tree')
  return value
}

export default useAccount