Exemplo de contexto com leitura e escrita de dados

context.jsx

import React, { createContext, useState, useMemo } from 'react'

const context = createContext()

export const InvoiceProvider = ({ children }) => {
  const [year, setYear] = useState()
  const [month, setMonth] = useState()
  const [refetchInvoice, setRefetchInvoice] = useState(false)
  const [selectedItem, setselectedItem] = useState()
  const contextValue = useMemo(() => ({
    year,
    setYear,
    month,
    setMonth,
    refetchInvoice,
    setRefetchInvoice,
    selectedItem,
    setselectedItem,
  }), [year, month, refetchInvoice, selectedItem])
  
  return (
    <context.Provider value={contextValue}>
      {children}
    </context.Provider>
  )
}

export default context

index.jsx

import React from 'react'
import { InvoiceProvider } from './context'
import YearMonthSelector from './YearMonthSelector'
import InvoiceResult from './InvoiceResult'
import InvoiceDispute from './InvoiceDispute'

const Invoice = () => (
  <InvoiceProvider>
    <YearMonthSelector />
    <InvoiceResult />
    <InvoiceDispute />
  </InvoiceProvider>
)

export default Invoice

InvoiceResult.jsx

import React, { useState, useContext, useEffect } from 'react'
import useResouce from 'rest-resource'
import InvoiceTable from 'components/InvoiceTable'
import Pagination from 'components/Pagination'
import invoiceContext from './context'
import { Header, PreviousMonth, NextMonth } from './styled'

const InvoiceResult = () => {
  const { page, setPage } = useState(1)
  const {
    year,
    month,
    setMonth,
    selectedItem,
    setSelectedItem,
    refetchInvoice,
    setRefetchInvoice,
  } = useContext(invoiceContext)
  const [fetchInvoice, invoiceResult] = useResource('invoice').fetchOneLazy()
 
  useEffect(() => {
    fetchInvoice({ page, year, month })
  }, [page, year, month])
  
  const refetch = async () => {
    await invoiceResult.refetch()
    setRefetchInvoice(false)
  }
  
  useEffect(() => {
    if (refetchInvoice) refetch()
  }, [refetchInvoice])
  
  return (
    <>
      <Header>
        <PreviousMonth onClick={() => setMonth(month - 1)}>Mês anterior</PreviousMonth>
        <NextMonth onClick={() => setMonth(month + 1)}>Próximo mês</NextMonth>
      </Header>
      <InvoiceTable invoice={invoiceResult.data} selectedItem={selectedItem} onSelectItem={setSelectedItem} />
      <Pagination currentPage={page} onChangePage={setPage} />
    </>
  )
}

YearMonthSelector.jsx

import React, { useContext, useEffect } from 'react'
import useResouce from 'rest-resource'
import invoiceContext from './context'
import { SearchPanel, StyledSelector } from './styled'

const YearMonthSelector = () => {
  const { year, setYear, month, setMonth } = useContext(invoiceContext)
  const { data: options, loading, errors } = useResource('yearsAndMonths').fetchOne()
 
  useEffect(() => {
    setYear(options.years[0])
    setMonth(options.months[0])
  }, [options])
  
  return (
    <SearchPanel>
      <StyledSelector value={month} options={options.months} onChange={setMonth} />
      <StyledSelector value={year} options={options.years} onChange={setYear} />
    </SearchPanel>
  )
}