Function App

exercises/02.dynamic/01.problem.cache/index.tsx:6–31

()

import { getImageUrlForShip, getShip } from './utils.tsx'

function App() {
	const [count, setCount] = useState(0)
	const [shipName, setShipName] = useState('Dreadnought')

	function handleShipSelection(newShipName: string) {
		setShipName(newShipName)
	}

	return (
		<div className="app-wrapper">
			<button onClick={() => setCount((c) => c + 1)}>
				Click to re-render: {count}
			</button>
			<ShipButtons shipName={shipName} onShipSelect={handleShipSelection} />
			<div className="app">
				<div className="details">
					<ErrorBoundary fallback={<ShipError shipName={shipName} />}>
						<Suspense fallback={<ShipFallback shipName={shipName} />}>
							<ShipDetails shipName={shipName} />
						</Suspense>
					</ErrorBoundary>
				</div>
			</div>
		</div>
	)
}

function ShipButtons({
	shipName,