React Context and Hook

15th April, 2023

Although I use this all the time I always have to look up how to implement it. This example is based on Kent C. Dodds’ article¹ on the subject.

I’ve used this most recently when creating the Storypoint Shuffle² app.

1
import * as React from 'react'
2

3
type Action = {type: 'increment'} | {type: 'decrement'}
4
type Dispatch = (action: Action) => void
5
type State = {count: number}
6
type CountProviderProps = {children: React.ReactNode}
7

8
const CountStateContext = React.createContext<
9
  {state: State; dispatch: Dispatch} | undefined
10
>(undefined)
11

12
function countReducer(state: State, action: Action) {
13
  switch (action.type) {
14
    case 'increment': {
15
      return {count: state.count + 1}
16
    }
17
    default: {
18
      throw new Error(`Unhandled action type: ${action.type}`)
19
    }
20
  }
21
}
22

23
function CountProvider({children}: CountProviderProps) {
24
  const [state, dispatch] = React.useReducer(countReducer, {count: 0})
25
  // NOTE: you *might* need to memoize this value
26
  // Learn more in http://kcd.im/optimize-context
27
  const value = {state, dispatch}
28
  return (
29
    <CountStateContext.Provider value={value}>
30
      {children}
31
    </CountStateContext.Provider>
32
  )
33
}
34

35
function useCount() {
36
  const context = React.useContext(CountStateContext)
37
  if (context === undefined) {
38
    throw new Error('useCount must be used within a CountProvider')
39
  }
40
  return context
41
}
42

43
export {CountProvider, useCount}

The provider can then be used to wrap the rest of your app:

1
<CountProvider>
2
  <ChildComponents />
3
</CountProvider>

And in your components that need the context:

1
const {state, dispatch} = useCount();

React Context and Hook

Footnotes