react-context.tsx

import { createContext, useContext } from 'react'

interface User {
  name: string
}

interface UserContext {
  value?: User
  setCurrentUser: (value: User) => void
}

const CurrentUserContext = createContext<UserContext | null>(null)

export function ProvideUser(props: { children: any }) {
  const [currentUser, setCurrentUser] = useState<User | undefined>(undefined)
  const context: UserContext = {
    value: currentUser,
    setCurrentUser: (value) => setCurrentUser(value)
  }

  return (
    <CurrentUserContext.Provider value={context}>
      {props.children}
    </CurrentUserContext.Provider>
  )
}

function ConsumerPage() {
  const { value: currentUser, setCurrentUser } = useContext(CurrentUserContext)!

  return (
    <div onClick={() => setCurrentUser({ name: 'autre' })}>
      {currentUser ? currentUser.name : 'not connected'}
    </div>
  )
}

function App() {
  return (
    <ProvideUser>
      <ConsumerPage />
    </ProvideUser>
  )
}