React coding question
useSWR

4. useSWR() I

SWR is a popular library of data fetching.

Let's try to implement the basic usage by ourselves

  1. this is not to replicate the true implementation of useSWR()
  2. The first argument key is for deduplication, we can safely ignore it for now

solutions:

  1. We don't care about _key
  2. fetcher should be Promise, if it's not ,return data
  3. we should get return data and err, so we should setData and setError inside then and catch

You can see my github file src/views/react/SWR.jsx (opens in a new tab)

import {useEffect, useState} from 'react';
function useSWR(_key, fetcher) {
  const fetchRes = fetcher();
  const [data, setData] = useState(fetchRes instanceof Promise ? undefined : fetchRes);
  const [error, setError] = useState();
 
  useEffect(() => {
    if (fetchRes instanceof Promise) {
      Promise.resolve(fetchRes)
      .then(res => setData(res))
      .catch(err => setError(err))
    }
  }, []);
  return {data, error};
}
 
function Swr() {
  const fetcher = () => {
    return Promise.resolve('succeeded');
    //return Promise.reject('err');
  };
  const { data, error } = useSWR('/api', fetcher)
  if (error) return <div>failed</div>
  if (!data) return <div>loading</div>
 
  return <div>{data}</div>
}
export default Swr;
useIsFirstRenderusePrevious