import './styles.scss'; import { useState, useEffect, useRef } from 'react'; type Issue = { id: string; title: string; description: string; author: string; }; const url1 = 'https://api-sage-two-60.vercel.app/mocks/issues/1?delay=2000'; const url2 = 'https://api-sage-two-60.vercel.app/mocks/issues/2?delay=1000'; const Page = ({ id }: { id: string }) => { const ref = useRef(id); const [data, setData] = useState({} as Issue); const [loading, setLoading] = useState(false); const url = id === '1' ? url1 : url2; useEffect(() => { // update ref value with the latest id ref.current = id; setLoading(true); fetch(url) .then((r) => r.json()) .then((r) => { // compare the latest id with the result // only update state if the result actually belongs to that id if (ref.current === r.id) { setData(r); console.log(r); } setLoading(false); }); }, [url, id]); if (!data.id || loading) return <>loading issue {id}; return (

My issue number {data.id}

{data.title}

{data.description}

); }; const App = () => { const [page, setPage] = useState('1'); return (

); }; export default App;

Chapter 15. Example 4