React / Intermediate

Memoize only expensive work

Use memoization for costly derived values, not as decoration around every expression.

Why this matters

The production reason.

Memoization is useful when a calculation is expensive or when a stable reference prevents a costly child render.

Using useMemo everywhere adds dependency noise and can hide simpler data-flow problems.

Measure or at least identify the expensive operation before adding memoization.

Copy-ready example

const visibleRows = useMemo(() => {
  return rows
    .filter((row) => row.status === activeStatus)
    .sort((a, b) => b.score - a.score);
}, [rows, activeStatus]);

Platform notes.

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

React: Memoize filtered, sorted, or grouped lists when they are large.

TanStack Table: Memoize column definitions so the table does not rebuild constantly.

Next.js: Do heavy data shaping on the server when the browser does not need to own it.

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.