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

it‘s my first time to use this library. useSWR('/api/data', fetchData) will excute when App props changes. how can i use useEffect let it only work in componentDidMount…it seems not work in useEffect.

import useSWR from 'swr'
import fetchData from './fetch-data'

function App () {
  const { data } = useSWR('/api/data', fetchData)
  // ...
}`
expect
`import useSWR from 'swr'
import fetchData from './fetch-data'

function App () {
useEffect(() => {
 const { data } = useSWR('/api/data', fetchData)
  // ...
}, [])
}

[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>
)