React Patterns

After this lesson, you will be able to: Use composition + compound components; understand render props + HOCs (historical).

Composition is the React way. The legacy patterns still appear in older code.

Prerequisites:Performance

Composition (the React way)

Components accept `children` (and other ReactNode props) to compose. More flexible than inheritance; matches React's data flow. Avoids 'one component with 30 boolean props', split into smaller composable pieces.

Compound components

Sibling components that share state via Context.

html

const TabsContext = createContext<{ active: string; setActive: (s: string) => void } | null>(null);

function Tabs({ defaultActive, children }) {
  const [active, setActive] = useState(defaultActive);
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

function TabList({ children }) { return <div className="tablist">{children}</div>; }

function Tab({ id, children }) {
  const ctx = useContext(TabsContext)!;
  return (
    <button onClick={() => ctx.setActive(id)} aria-selected={ctx.active === id}>
      {children}
    </button>
  );
}

function TabPanel({ id, children }) {
  const ctx = useContext(TabsContext)!;
  return ctx.active === id ? <div>{children}</div> : null;
}

Tabs.List = TabList;
Tabs.Tab = Tab;
Tabs.Panel = TabPanel;

// Use
<Tabs defaultActive="a">
  <Tabs.List>
    <Tabs.Tab id="a">First</Tabs.Tab>
    <Tabs.Tab id="b">Second</Tabs.Tab>
  </Tabs.List>
  <Tabs.Panel id="a">First content</Tabs.Panel>
  <Tabs.Panel id="b">Second content</Tabs.Panel>
</Tabs>

Render props + HOCs (historical)

Render prop: a component that takes a function as children, calling it with state. Replaced by hooks + composition. HOC (Higher-Order Component): a function that takes a component and returns a wrapped one. `withRouter(MyPage)`. Replaced by hooks. You'll see both in older codebases (pre-2019). Don't write new ones.

Common mistakes only experienced React devs avoid

Boolean-prop sprawl. Split into composed components. Reaching for HOCs in new code. Use hooks. Forgetting `displayName` on memo'd/forwarded components, debugging suffers. Excessive prop drilling. Compound components + context fix it.

Quick Check

Why compound components over a single component with 30 props?

Pick the cleanest answer.

←Performance Optimization

Back to React (Standalone Deep Dive)

Forms in React→