scrimba
Learn React Router
Suspense
Deferring data
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Deferring data
Expand for more info
Weather.jsx
run
preview
console
import React, { Suspense } from "react"
import { useLoaderData } from "react-router-dom"
import { sleep, getWeather } from "./utils"

export async function loader() {
const weather = await getWeather()
return weather
}

export default function Weather() {
const loaderData = useLoaderData()
const iconUrl =
`http://openweathermap.org/img/wn/${loaderData.weather[0].icon}@2x.png`

return (
<section className="weather-container">
<h1>Weather in Salt Lake City</h1>
<h3>{loaderData.main.temp}ºF</h3>
<img src={iconUrl} />
</section>
)
}
Console
/
-2:55