description: Imported skill bundle_conditional from vercel name: bundle_conditional signature: 09c8259c3efb04fc0abb8e412ccbda217c222ae8118516283e571c995fe3a7d4 source: /a0/tmp/skills_research/vercel/skills/react-best-practices/rules/bundle-conditional.md

title: Conditional Module Loading impact: HIGH impactDescription: loads large data only when needed tags: bundle, conditional-loading, lazy-loading

Conditional Module Loading

Load large data or modules only when a feature is activated.

Example (lazy-load animation frames):

tsx

function AnimationPlayer({ enabled, setEnabled }: { enabled: boolean; setEnabled: React.Dispatch<React.SetStateAction<boolean>> }) {
  const [frames, setFrames] = useState<Frame[] | null>(null)

  useEffect(() => {
    if (enabled && !frames && typeof window !== 'undefined') {
      import('./animation-frames.js')
        .then(mod => setFrames(mod.frames))
        .catch(() => setEnabled(false))
    }
  }, [enabled, frames, setEnabled])

  if (!frames) return <Skeleton />
  return <Canvas frames={frames} />
}

The typeof window !== 'undefined' check prevents bundling this module for SSR, optimizing server bundle size and build speed.