Tukukkk

I've implemented a custom useFetch hook so do fetching around my app:

import { useEffect, useState } from 'react'



const useFetch = ({ url, defaultData = null }) => {

  const [data, setData] = useState(defaultData)

  const [loading, setLoading] = useState(true)

  const [error, setError] = useState(null)



  useEffect(() => {

    fetch(url)

      .then(res => res.json())

      .then(res => {

        setData(res)

        setLoading(false)

      })

      .catch(err => {

        setError(err)

        setLoading(false)

      })

  }, )



  return [data, loading, error]

}



export default useFetch

Then it occurred to me... this will be used all over the app. How will it know which data/loading/error belongs to what call? When I make use of useFetch the first time, and then another use follows right behind it somewhere else in the app, does React track which internal state variables belong to which call of the hook?

Then I thought perhaps I need to do something more along the Redux lines and keep track of all the calls to the custom hook myself with the help of the useReducer hook:

import { useEffect, useReducer } from 'react'



const reducer = (state, action) => {

  const { url, data, err } = action

  const currentState = state[url]



  switch (action.type) {

    case 'fetching':

      return { ...state, [url]: { ...currentState, loading: true } }

    case 'success':

      return { ...state, [url]: { ...currentState, loading: false, data } }

    case 'fail':

      return { ...state, [url]: { ...currentState, loading: false, err } }

    default:

      return state

  }

}



const useFetch = ({ url, defaultData = null }) => {

  const [state, dispatch] = useReducer(reducer, {}, { type: 'fetching', url })

  const { data: d, loading: l, err: e } = state[url]



  useEffect(() => {

    fetch(url)

      .then(res => res.json())

      .then(data => dispatch({ type: 'success', url, data }))

      .catch(err => dispatch({ type: 'fail', err }))

  }, )



  return [d || defaultData, l, e]

}



export default useFetch

Do I need to manually keep track of all the calls to useFetch myself as in the 2nd example? Or does React handle this in its internals and the 1st example is all I need?

Each custom hook will have its own state and will not share state among different instances of the same hook. Hence you don't need to keep track of which state belongs to which hook.

Hooks will only share the logic and not data among different instances, much like HOCs and Render Props.

So the first example would work just right.

In your case multiple calls to useFetch will essentially lead to multiple calls to useState and React FAQs explain the independence of state with useState which does indeed answer your doubt

React keeps track of the currently rendering component. Thanks to the
Rules of Hooks, we know that Hooks are only called from React
components (or custom Hooks — which are also only called from React
components).

There is an internal list of “memory cells” associated with each
component. They’re just JavaScript objects where we can put some data.
When you call a Hook like useState(), it reads the current cell (or
initializes it during the first render), and then moves the pointer to
the next one. This is how multiple useState() calls each get
independent local state.