context + hook pattern (ReactJS)

app.js

import { UserProvider } from "./context"
import { Component } from "./component"

export default function App() {
  return (
    <UserProvider>
      <h1>Context App</h1>
      <Component />
      <br />
      <Component />
    </UserProvider>
  )
}

component.js

import { useUser } from "./hook"

export function Component() {
  const { name, setName } = useUser()

  const onClick = () =>
    setName(Math.random().toString().slice(2))
  return <button onClick={onClick}>{name}</button>
}

context.js

import { createContext, useState } from "react"

const useUserInit = (_name = "unknown") => {
  const [name, setName] = useState(_name)
  return { name, setName }
}

export const UserContext = createContext({})

export function UserProvider({ children }) {
  const user = useUserInit()
  return (
    <UserContext.Provider value={user}>
      {children}
    </UserContext.Provider>
  )
}

export function TestUserProvider({ children, value }) {
  return (
    <UserContext.Provider value={value}>
      {children}
    </UserContext.Provider>
  )
}

export function TestContextProvider({ children, Context, value }) {
  return (
    <Context.Provider value={value}>
      {children}
    </UserContext.Provider>
  )
}

hook.js

import { useContext } from "react"
import { UserContext } from "./context"

export const useUser = () => useContext(UserContext)

https://codesandbox.io/s/react-context-hook-ejh2kn