The below code is specific to this question. In real world, I think I would only pass the fetcher into useSWR when the fetcher returns a promise, that way I could avoid all the checks about whether fetcher returns a promise or resolves immediately, also avoid having the useMemo call. I'd highly recommend use SWR or similar library for anything in production instead of recreating the wheel. :).
<pre class="shiki github-dark shaku"><code>import { useState, useEffect, useMemo } from 'react';export function useSWR&lt;T = any, E = any&gt;( _key: string, fetcher: () =&gt; T | Promise&lt;T&gt;): { data?: T error?: E} { // your code here const fetcherResult = useMemo(fetcher, []); const [userRequest, setUserRequest] = useState( fetcherResult instanceof Promise ? { data: undefined, error: undefined, isLoading: true } : { data: fetcherResult, error: undefined, isLoading: false } ) useEffect(() =&gt; { if (fetcherResult.then) { // Could probably use a more robust check here to check if fetcher is thenable or just fetcherResult instanceof Promise. fetcherResult.then((res) =&gt; { setUserRequest({ data: res, error: undefined, isLoading: false }); }).catch(error =&gt; { setUserRequest({ data: undefined, error, isLoading: false }) }) } }, []) if (userRequest.isLoading) { return {data: undefined, error: undefined} } return { data: userRequest.data, error: userRequest.error }}</code></pre>

use useMemo hook to memorize the result of fetcher result. Bon Appétit

SWR is a popular library of data fetching. Let's try to implement the basic usage by ourselves. import React from 'react'function App() { const { data…