add useCallback in useSWRInfinite example when need to use setSize

Bug report

Description / Observed Behavior

What kind of issues did you encounter with SWR?

setSize infinite loop in useSWRInfinite when combine with intersection-observer

because we need to use useEffect to listen scroll,

so if use setSize() will be infinite loop

Expected Behavior

How did you expect SWR to behave here?

maybe can add useCallback is fine

like

const loadMore = useCallback(() => setSize((state) => state + 1), [setSize]);

Repro Steps / Code Example

Or share your code snippet or a CodeSandbox link is also appreciated!

Additional Context

SWR version. Add any other context about the problem here.

[shuding]

@koba04 Sorry I should explain a bit more. I think he’s referring to this example: https://swr.vercel.app/examples/infinite-loading, which is very basic. Added the label since we need an example specifically for infinite scroll cases (load more when you hit the page bottom).

[hazae41]

Just use an extra “should” state with an useEffect

const [shouldLoadMore, setShouldLoadMore] = useState(false)

const observer = useMemo(() => {
  return new IntersectionObserver(([e]) => {
    if (e) setShouldLoadMore(e.isIntersecting)
  })
}, [])

useEffect(() => {
  if (shouldLoadMore)
    pages.setSize(size => size + 1)
}, [shouldLoadMore])