notes.dt.in.th

Context provider pattern in React

type ThingyContext = {
  mounted: () => () => void
  // ...
}

function initializeThingyContext(): ThingyContext {
  // ...
}

const ThingyContext = createContext<ThingyContext | null>(null)

export function ThingyContextProvider(props: { children: ReactNode }) {
  const [context] = useState(() => initializeThingyContext())
  useEffect(() => context.mounted(), [context])
  return (
    <ThingyContext.Provider value={context}>
      {props.children}
    </ThingyContext.Provider>
  )
}

export function useThingyContext() {
  const context = useContext(ThingyContext)
  if (!context) {
    throw new Error('No ThingyContext provided')
  }
  return context
}