【React】useSWRはAPIからデータ取得をする快適なReact Hooksだと伝えたい

const Profile = () => {
  const [profile, setProfile] = useState(null)
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    (async () => {
      setLoading(true)

      const res = await fetch('/api/user')
      setProfile(await res.json())

      setLoading(false)
    })()
  }, [])

  if (profile === null || loading) {
    return <div>loading</div>
  }

  return <div>hello {profile.name}!</div>
}

import useSWR from 'swr'

const fetcher = () => fetch('/api/user')

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>

  return <div>hello {data.name}!</div>
}

const { data, error } = useSWR('/api/user', fetcher, {
  initialData: { name: 'React Developer' }
})

export async function getServerSideProps() {
  const data = await fetcher('/api/data')
  return { props: { data } }
}

function App (props) {
  const initialData = props.data
  const { data } = useSWR('/api/data', fetcher, { initialData })

  return <div>{data}</div>
}

import { request } from 'graphql-request'
import useSWR from 'swr'

const API = 'https://api.graph.cool/simple/v1/movies'

function MovieActors() {
  const { data, error } = useSWR(
    `{
      Movie(title: "Inception") {
        actors {
          id
          name
        }
      }
    }`,
    (query) => request(API, query)
  )

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return data.Movie.actors
    .map((actor) => <li key={actor.id}>{actor.name}</li>)
}

function useSWR<Data = any, Error = any>(
  key: keyInterface,
  fn?: fetcherFn<Data>,
  config?: ConfigInterface<Data, Error>
): responseInterface<Data, Error> {
  // ...
  // start a revalidation
  const revalidate = useCallback(
    async (
      revalidateOpts: RevalidateOptionInterface = {}
    ): Promise<boolean> => {
      // ...
      cache.set(key, newData, false)
      cache.set(keyErr, undefined, false)
      // ...
      return true
    },
    [key]
  )
  // ...
  return useMemo(() => {
    // ...
  }, [revalidate])
}

import Cache from './cache'
// cache
const cache = new Cache()

export {
  // ...
  cache
}

export default class Cache implements CacheInterface {
  private __cache: Map<string, any>

  constructor(initialData: any = {}) {
    // Mapオブジェクトを生成している
    this.__cache = new Map(Object.entries(initialData))
  }

  get(key: keyInterface): any {
    const [_key] = this.serializeKey(key)
    return this.__cache.get(_key)
  }

  set(key: keyInterface, value: any, shouldNotify = true): any {
    const [_key] = this.serializeKey(key)
    this.__cache.set(_key, value)
    if (shouldNotify) mutate(key, value, false)
    this.notify()
  }

  keys() {
    return Array.from(this.__cache.keys())
  }

  serializeKey(key: keyInterface): [string, any, string] {
    // keyが関数や配列の時にシリアライズする処理
    return [key, args, errorKey]
  }
}