React patterns are reusable solutions to problems that appear repeatedly as applications grow — prop drilling, duplicated stateful logic, overly complex component APIs, and the tension between flexibility and simplicity. Knowing which pattern to reach for, and when not to reach for any of them, is what separates maintainable codebases from ones that become hard to change.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/rijvi-mahmud/shaddy/llms.txt
Use this file to discover all available pages before exploring further.
Why Patterns Matter
Modern React applications routinely face the same structural challenges: components that mix data fetching with rendering, logic that needs to be shared across components without duplicating it, and component APIs that need to be both simple for basic cases and flexible for advanced ones. Patterns give teams a shared vocabulary and a proven structural solution for each of these situations.Patterns are tools, not rules. Applying a pattern to a simple component adds overhead without benefit. Use them when the problem they solve is actually present in your code.
When to Use Patterns
Consider a pattern when you notice one of these signals:- A component is doing too many things at once (fetching, transforming, and rendering).
- The same stateful logic appears in two or more components.
- A component’s prop list is growing unwieldy because it tries to cover every configuration.
- Parent and sibling components need to read or control a child component’s state.
- You’re copying component logic into tests because it’s too tightly coupled to the UI.
Patterns
Container-Presentation
Separate data-fetching and business logic (container) from pure UI rendering (presentation) to improve testability and reuse.
Hooks Pattern
Extract stateful logic and side effects into custom React hooks for reuse, testability, and cleaner component code.
Compound Components
Build flexible component APIs using React Context and multiple sub-components that implicitly share state — like
<Tabs> and <Tabs.Panel>.Render Props
Pass a function as a prop to share stateful logic between components while giving callers full control over what is rendered.
Function Children
Use the
children prop as a function so a component can share its state with whatever the caller chooses to render.Control Props
Let parent components take full control of a child’s state by providing a
value prop and an onChange callback — mirroring how native HTML inputs work.