React: example global state with context

Page.js

import React, { useContext } from 'react'
import { useUser } from 'contexts/User'

export default function Page() {
  const user = useUser(context)

  return (
    <div>Your name is {user.name}</div>
  )
}

User.js

import React, { useState, useContext } from 'react'

const Context = React.createContext()

export function useUser() {
  return useContext(context)
}

export function UserContextProvider({ children }) {
  const [user, setUser] = useState(null)
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    // fetch user data
  }, [])
  
  useEffect(() => {
    if (user == null) {
      return
    }
    
    // setup axios
    
    return () => {
      // remove axios interceptors
    }
  }, [user && user.id])

  function authenticate() {
    //
  }

  return (
    <Context.Provider value={{ user, authenticate }}>
      {isLoading ? null : children}
    </Context.Provider>
  )
}