React Context Boiler Plate - Typescript

react-context-boilerplate.tsx

import React, { createContext, useContext, useState, useEffect } from "react"

type Props = {
  children: React.ReactNode
}
type Context = {
  count: number
  increment: () => void
}

// Just find-replace "XContext" with whatever context name you like. (ie. DankContext)
const XContext = createContext<Context | null>(null)

export const XContextProvider = ({ children }: Props) => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    setCount(42)
  }, [])

  const increment = () => {
    setCount(count + 1)
  }

  return (
    <XContext.Provider value={{ count, increment }}>
      {children}
    </XContext.Provider>
  )
}

export const useXContext = () => {
  const context = useContext(XContext)

  if (!context)
    throw new Error("XContext must be called from within the XContextProvider")

  return context
}

Exactly what I was looking for, thanks