Custom Hooks with Context

import { useState, useEffect, useContext, createContext } from 'react'
import axios from 'axios'

const FetchContext = createContext()

const url = 'https://jsonplaceholder.typicode.com/posts'

const FetchProvider = ({ children }) => {
  const [posts, setPosts] = useState([])

  const providerValue = useMemo(
    () => ({
      posts,
      setPosts,
    }),
    []
  )

  useEffect(() => {
    ;(async () => {
      const { data } = await axios.get(url)
      setPosts(data)
    })()
  }, [])

  return <FetchContext.Provider value={providerValue}>{children}</FetchContext.Provider>
}

const useFetch = () => {
  return useContext(FetchContext)
}

export { FetchProvider, useFetch }

//Wrap index.js w/ <FetchProvider> ... </FetchProvider>