how does swr work with useEffect??request many times when props change. about swr

[shuding]

You can't call hooks inside useEffect: https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

Instead you can do this:

function App () {
  const [mounted, setMounted] = useState(false)
  const { data } = useSWR(mounted ? '/api/data' : null, fetchData)

  useEffect(() => {
    setMounted(true)
  }, [])
}

When key is null, SWR will pause itself. It's also explained here https://github.com/zeit/swr#key-as-a-function.

[shuding]

@corysimmons you can just remove that useEffect:

const [selectOption, setSelectOption] = useState()
useSWR(`https://api.example.com/${selectOption}`)

return (
  <select>...</select>
)

[corysimmons]

@shuding My fetched URL changes depending on some <select>. How does SWR handle that without useEffect?

That is... how can I accomplish something like below if I can't nest useSWR?

const [selectOption, setSelectOption] = useState()

useEffect(() => {
  useSWR(`https://api.example.com/${selectOption}`) // 🚨 can't nest hooks
}, [selectOption])

return (
  <select>...</select>
)

[shuding]

@moroshko nope, SWR isn't like the normal fetch call. It will reuse the result, and only fetch again in certain cases by default (for example if you refocus on the window).

[sergiodxa]

RevalidateOnFocus make SWR run a new fetch every time the tab recover focus, when you focus on the browser DevTools the tab lose focus, when you click again in the page it will recover the focus and revalidate the data triggering a new request.

[corysimmons]

@shuding Awesome. btw I like your Github quote and domain name. Thanks for the nice library!

[moroshko]

@quietshu Maybe I'm missing the intent here, but wouldn't fetch happen on every rerender this way? (since mounted is going to be always true)

[daviesdoclc]

I'm having this same issue. I'm using the setMounted technique shown above. However, I still see network requests to my SWR endpoint when I change another property on the component and render gets called. Maybe SWR always makes the call in DEV mode?

If I add revalidateOnFocus: false to the SWR request then it seems to work. I'm testing this in Chrome developer tools. I wonder if it's doing something funky.