why pagination example has useCallback ?

[ac88]

https://github.com/tannerlinsley/react-query/blob/69236d3e0bce712376767a86eac9246b304f6be6/examples/pagination/pages/index.js#L39-L43

why useEffect has a dep fetchProjects?

if i remove fetchProjects from useEffect deps and the fetchProjects function can remove useCallback wrap

it also stop re render.

  const fetchProjects = 
    // React.useCallback(
      async (key, page = 0) => {
        // console.error('useCallback fetchProjects',page,status)
        const { data } = await axios.get('/api/projects?page=' + page)
        return data
      }
  // , [])

  React.useEffect(() => {
    if (latestData?.hasMore) {
      cache.prefetchQuery(['projects', page + 1], fetchProjects)
    }
  }, [
    latestData
    // , fetchProjects
    , page
  ])

[TkDodo]

why useEffect has a dep fetchProjects?

Because every effect should define an exhaustive list of dependencies. The function is used inside the effect, so it needs to be added as dependency. To achieve referential stability between renders, the function is wrapped in useCallback so that it is only re-created when it’s own dependencies change.

See also: https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies