Advanced React, explained with pictures

React Performance Optimization Techniques Every Developer Should Know

React is slow only when it re-renders too much or ships too much code. Find the slow part with the Profiler, then fix it with memoization, smaller state, lazy loading and list virtualization.

const Row = React.memo(function Row({ item }) {
  return <li>{item.name}</li>;   // skips if item is unchanged
});

Quick wins

• Keep state as low in the tree as possible.
• Give list items a stable key, never the array index when order can change.
• Do not create new objects in props on every render.

Official docs: React.memo · React DevTools

useMemo vs useCallback →

useMemo vs useCallback: Understanding When to Use Them

useMemo remembers a calculated value. useCallback remembers a function. Both only recompute when something in their dependency array changes.

const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);
const onSave = useCallback(() => save(id), [id]);

Rule of thumb: do not add them everywhere. Use them when a calculation is truly slow, or when a function goes to a React.memo child.

Docs: useMemo · useCallback

← PerformanceContext vs Redux →

React Context API vs Redux Toolkit: Which One Should You Choose?

Choose Context for small, slow-changing shared values like theme or logged-in user. Choose Redux Toolkit when many parts of a large app update shared state often and you want strong debugging tools.

const todos = createSlice({
  name: "todos", initialState: [],
  reducers: { add: (state, a) => { state.push(a.payload); } }
});

Docs: Context · Redux Toolkit

← useMemo vs useCallbackCustom Hooks →

Custom Hooks in React: Write Reusable Logic Like a Pro

A custom Hook is a function whose name starts with use and that calls other Hooks. It lets many components share the same logic without copying code.

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(r => r.json()).then(setData);
  }, [url]);
  return data;
}
const users = useFetch("/api/users");

• Each component gets its own separate state, only the logic is shared.
• Follow the Rules of Hooks: call them at the top level only.

Docs: Reusing logic with custom Hooks

← Context vs ReduxServer Components →

React Server Components: The Future of React Development

Server Components run only on the server and send finished output to the browser. Users download less JavaScript, and your components can read databases directly.

// Server Component (default in frameworks like Next.js)
export default async function Posts() {
  const posts = await db.posts.findMany();
  return posts.map(p => <h2 key={p.id}>{p.title}</h2>);
}

Add "use client" at the top of a file only when you need state, effects or click handlers. Server Components need a supporting framework such as Next.js.

Docs: Server Components

← Custom HooksLazy Loading →

Lazy Loading and Code Splitting in React Applications

Code splitting breaks one large JavaScript file into smaller pieces. Lazy loading downloads a piece only when the user needs it, so the first page opens faster.

const Dashboard = lazy(() => import("./Dashboard"));

<Suspense fallback={<p>Loading...</p>}>
  <Dashboard />
</Suspense>

Split by route first, since users only see one page at a time. Always give Suspense a fallback.

Docs: lazy · Suspense

← Server ComponentsError Boundaries →

Error Boundaries in React: Handling Errors Gracefully

An error boundary catches errors that happen while rendering its children and shows a fallback screen, so one broken widget does not crash the whole app.

class Boundary extends React.Component {
  state = { failed: false };
  static getDerivedStateFromError() { return { failed: true }; }
  render() {
    return this.state.failed ? <p>Something went wrong.</p> : this.props.children;
  }
}

Boundaries do not catch errors in event handlers, async code or the boundary itself. Use try/catch there. The react-error-boundary package gives a ready-made version.

Docs: Error boundaries

← Lazy LoadingConcurrent Rendering →

React Concurrent Rendering Explained in Simple Terms

Concurrent rendering lets React pause a big, slow update to handle something urgent, like typing, first. Your app stays responsive while heavy work finishes in the background.

const [isPending, startTransition] = useTransition();

function onChange(e) {
  setText(e.target.value);                      // urgent
  startTransition(() => setList(filter(e.target.value))); // can wait
}

• useTransition marks an update as low priority.
• useDeferredValue gives you a delayed copy of a value.

Docs: useTransition · useDeferredValue

← Error BoundariesFAQ →