Typorithm · medium

memo & Composition

react-memoreactmemocompositionchildren

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn memo & Composition

Patterns

React.memo skips re-rendering a component when its props are shallow-equal to the last render. Composition via the children prop keeps components generic and avoids deep prop drilling. memo helps only when the parent re-renders often and props rarely change; prefer composition over configuration.

React.memo wraps a component and compares its new props to the previous ones with a shallow equality check. If they match, React reuses the last render instead of re-running the component.

Composition through the children prop lets a component like Layout wrap whatever its parent passes, instead of accepting many configuration props. This keeps wrappers generic and sidesteps prop drilling.

memo is a targeted tool, not a default: it pays off when a parent re-renders frequently while a child's props stay the same. Passing fresh objects or inline functions as props defeats the shallow check, so prefer composition over piling on configuration.

memo skips re-render on shallow-equal props.

The children prop composes arbitrary content.

memo helps when parents re-render but props rarely change.

import { memo } from "react";

const Row = memo(function Row({ label }: { label: string }) {
  return <li>{label}</li>;
});

function Layout({ children }: { children: React.ReactNode }) {
  return <main>{children}</main>;
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Wrap in memo

memo wraps a component so React skips re-rendering it when props are shallow-equal.

const Row = memo(function Row({ label }: { label: string }) {

2. Import memo

memo is the higher-order component that adds prop-based render skipping.

import { memo } from "react";

3. children prop

Accepting children lets Layout wrap arbitrary content passed by its parent.

function Layout({ children }: { children: React.ReactNode }) {

4. Render children

Rendering {children} composes the passed content inside <main>, keeping Layout generic.

return <main>{children}</main>;

5. Memoized output

Row renders one list item; memo avoids re-rendering it when label is unchanged.

return <li>{label}</li>;

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.