React Patterns & Best Practices

Compound components are several components that only work together and share state internally, like <select> and <option> in HTML.

The parent Accordion creates a context holding the open item's ID and a toggle function. Child components consume it.

Each AccordionItem provides its own small context with its id, so Title and Content know which item they belong to without the consumer repeating the ID.

Attaching the child components as properties of the parent function so they're used as Accordion.Item, Accordion.Title, and Accordion.Content.

Passing any extra props a wrapper component receives on to the element it renders, using rest/spread syntax.

A component receives a function (often as children) and calls it to render part of its output. The component controls when and with what data; the consumer controls how it looks.

A function prop that tells a generic list how to get a unique key from each item, since the list doesn't know the item's shape.

Debouncing delays an action until the user stops triggering it for a set time, e.g. filtering only after typing pauses for 500 ms.

A guide to when each reuse pattern fits.