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 url ref.current = url; setLoading(true); fetch(url).then((result) => { // compare the latest url with the result's url // only update state if the result actually belongs to that url if (result.url === ref.current) { result.json().then((r) => { setData(r); console.log(r); }); } setLoading(false); }); }, [url]); 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 5