An example of a React context hook, but with an extra immer-powered immutable setter

use-context-with-immutable-fn-hook.js

import React, { createContext, useState, useContext } from 'react'
import immer from 'immer';

const ExampleStateContext = createContext()
const ExampleDispatchContext = createContext()

const ExampleProvider = ({children}) => {
  const [example, setExample] = useState(null)
  return (
    <ExampleStateContext.Provider value={example}>
      <ExampleDispatchContext.Provider value={setExample}>
        {children}
      </ExampleDispatchContext.Provider>
    </ExampleStateContext.Provider>
  )
}

const useExampleState = () => {
  const context = useContext(ExampleStateContext)
  if (context === undefined) {
    throw new Error('useExampleState must be used within a ExampleProvider')
  }
  return context
}

const useExampleDispatch = () => {
  const context = useContext(ExampleDispatchContext)
  if (context === undefined) {
    throw new Error('useExampleDispatch must be used within a ExampleProvider')
  }
  return context
}

const useImmutableExampleDispatch = () => {
  const example= useExampleState()
  const dispatch = useExampleDispatch()
  return fn => dispatch(immer(example,fn))
}

const useExample = () => [useExampleState(), useExampleDispatch(), useImmutableExampleDispatch()]
export {ExampleProvider, useExample}

used something like:

import {useExample} from 'example-hook'
const App = props => {
  const [example, setExample, immutablySetExample] = useExample()
  const deepSetProp = () => immutablySetResource(draft=>{draft.foo.bar.baz++})