React / Intermediate

Prefer composition over prop tunnels

Use children and small slots instead of pushing many props through unrelated layers.

Why this matters

The production reason.

Long prop tunnels make parent components know too much about deeply nested UI.

Composition lets the parent provide structure while children own their own details.

This is cleaner for dashboards, modals, cards, and reusable page sections.

Copy-ready example

function SettingsLayout({ sidebar, children }) {
  return (
    <div className="settings-grid">
      <aside>{sidebar}</aside>
      <main>{children}</main>
    </div>
  );
}

Platform notes.

How this applies outside a perfect demo, including frameworks, CMS platforms, stores, and builder workflows.

React: Use children and named slots before reaching for context.

Design systems: Slots keep components flexible without dozens of boolean props.

Next.js layouts: Compose route sections with layout.jsx instead of forwarding page props everywhere.

Explore other stacks

Jump into a different technology.

Move from this React note into related HTML, CSS, Next.js, JavaScript, React, WordPress, and performance lessons.

Next.js

Use generateStaticParams for dynamic routes

Pre-render dynamic pages at build time instead of on every request to cut TTFB.

JavaScript

Abort stale fetch requests

Cancel outdated browser requests so fast UI changes do not render old data.

CSS

Use clamp for fluid spacing

Fluid spacing keeps layouts responsive without a forest of breakpoint overrides.

WordPress

Escape output at the template edge

Sanitize on input, escape on output, and keep theme templates strict about user content.

Performance

Compress images before deploy

Oversized images are still the easiest way to lose LCP before users see anything.

HTML

Use real buttons for actions

If it changes state, use button. If it navigates, use a link.