decocms SVG Sprites — prevent repeated fetch loop
Problem
Calling asset() inside the component body recomputes the URL on every render. Since <Icon> is rendered once per icon on the page, each instance triggers a separate fetch to sprites.svg — causing the sprite file to be downloaded repeatedly in a loop instead of once.
// ❌ recomputed on every <Icon> render
function Icon({ id }: Props) {
const spritesUrl = asset("/sprites.svg");
return <svg><use href={`${spritesUrl}#${id}`} /></svg>;
}
Fix — hoist to module level
// ✅ computed once, shared across all renders
const spritesUrl = asset("/sprites.svg");
function Icon({ id }: Props) {
return <svg><use href={`${spritesUrl}#${id}`} /></svg>;
}
General rule
Any asset() call whose result does not depend on props belongs outside the component.