Building the useIsFeching hook

[CraxGrix]

I'm trying to build the useIsFetching hook to track if swr is sending a request, it looks something like this

import {create} from 'zustand'

const useIsFetching = () => {
  const counter = useRequestCounterStore((store) => store.counter)

  return counter > 0
}

const useRequestCounterStore = create((set, get) => ({
  counter: 0,
  increment: () => set((state) => ({ counter: state.counter + 1 })),
  decrement: () => set((state) => ({ counter: state.counter - 1 })),
}))


export const ComponentProvider = ({ children }) => {
  const fetcher = useFetcher()
  const [increment, decrement] = useRequestCounterStore((store) => [store.increment, store.decrement])

  const requestCounterMiddleware = useMemoizedFn((next) => {
    return (key, fetcher, config) => {
      const extendedFetcher = (...args) => {
        increment()
        return fetcher(...args).finally(() => decrement())
      }
      return next(key, extendedFetcher, config)
    }
  })

  return (
    <React.StrictMode>
      <Theme>
        <SWRConfig
          value={{
            use: [requestCounterMiddleware],
            revalidateOnFocus: false,
            revalidateOnMount: false,
            revalidateOnReconnect: false,
            refreshWhenOffline: false,
            refreshWhenHidden: false,
            fetcher,
          }}
        >
          <SuspenseBoundary>{children}</SuspenseBoundary>
        </SWRConfig>
      </Theme>
    </React.StrictMode>
  )
}

But this code devtool will prompt a warning, I want to know what went wrong

Warning: Cannot update a component (`ComponentProvider`) while rendering a different component (`Unknown`). To locate the bad setState() call inside `Unknown`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render