<pre class="shiki github-dark shaku"><code>import React, {useState, useEffect} from 'react';export function useSWR&lt;T = any, E = any&gt;( _key: string, fetcher: () =&gt; T | Promise&lt;T&gt;): { data?: T error?: E} { const result = fetcher(); const [data, setData] = useState&lt;T | undefined&gt;(initData); const [error, setError] = useState(undefined); function initData(): T | undefined { if('then' in result) { // fetcher is a promise return undefined; } return result; } useEffect(() =&gt; { if(!('then' in result)) { return; } fetchData(); async function fetchData() { try { const fetchedData = await result; setData(fetchedData); }catch(e) { setError(e); } } } , []); return { data, error }}// if you want to try your code on the right panel// remember to export App() component like belowlet renderCount = 0const fetcher = () =&gt; ({ name: 'BFE.dev' })// const fetcher = () =&gt;// new Promise&lt;{ name: string }&gt;((resolve) =&gt; {// setTimeout(// () =&gt;// resolve({// name: 'BFE.dev'// }),// 500// )// })export function App() { renderCount += 1 const { data, error } = useSWR('/api', fetcher) if (error) return &lt;div&gt;errored&lt;/div&gt; if (!data) return &lt;div&gt;loading&lt;/div&gt; console.log(renderCount) return &lt;div&gt;{data.name}&lt;/div&gt; }</code></pre>

useSWR()

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…