React Context and State rolled into one

useItem.js

/*

  Usage:

    import { ItemContextProvider } from 'hooks/useItem'

    <ItemContextProvider
      item={item}
    >
      <ComponentThatUsesItem />
    </ItemContextProvider>

  and inside ComponentThatUsesItem:

    import { useItem } from 'hooks/useItem'

    const { item } = useItem()

*/
import React, { createContext, useContext, useState } from 'react'

export const ItemContext = createContext()

export const ItemContextProvider = (props) => {
  // Use State to keep the values. Initial values are obtained from ItemContextProvider’s props.
  const [item, setItem] = useState(props.item)
  // Make the context object (i.e. the “API” for Item)
  const itemContext = {
    item,
    // updateItem,
    // deleteItem
  }
  // Pass the value in Provider and return
  return <ItemContext.Provider value={itemContext}>{props.children}</ItemContext.Provider>
}

export const { Consumer: ItemContextConsumer } = ItemContext

export const useItem = () => useContext(ItemContext)