Best way to make sure fetcher is called only one

[GuichiZhao]

As mentioned #954, the timing of revalidating is invoked is unpredictable especially when suspense is present. Here is my proposed way of making sure the fetcher is called only once of the application lifecycle

import { useEffect, useState } from 'react'
import useSWR, { cache } from 'swr'
export default function Test() {
  const [mount, setMount] = useState(false)
  return (
    <div>
      {mount ? <Child /> : 'unnounted'}
      <button onClick={() => setMount((x) => !x)}>switch mount</button>
    </div>
  )
}

function Child() {
  const { data, revalidate } = useSWR('key', fetcher, {
    revalidateOnFocus: false,
    revalidateOnMount: false,
    revalidateOnReconnect: false,
    refreshWhenOffline: false,
    refreshWhenHidden: false,
    refreshInterval: 0,
  })
  useEffect(() => {
    if (!cache.get('key')) {
      revalidate()
    }
  }, [revalidate])
  return <div>{data}</div>
}

function fetcher() {
  console.log('fetcher is call')
  return Promise.resolve('hello')
}

I know that the point of SWR is revalidation, but there are also other nice features out of the box without revalidation, so the correctness of such practice makes a lot of sense in some projects

Not sure such practice is a production-ready once
I suppose memorized fetcher is also a valid option

Any thoughts are welcomed.