Ring:applying Composition Patterns

Applying Composition Patterns

When to use

• Refactoring components with boolean prop proliferation
• Building flexible, reusable component libraries
• Architecture review of React component hierarchies
• Component has grown to 3+ boolean props controlling behavior
• Multiple render props or conditional rendering branches

Skip when

• Simple components with 1-2 props and no conditional rendering
• Non-React code
• Prototype or throwaway code where flexibility doesn't matter
• Component is leaf-level with no composition concerns

Related

Complementary: ring:checking-frontend-quality — validate component quality after refactoring

---

Abstract

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

---

Table of Contents

1. [Component Architecture](#1-component-architecture) — HIGH

• 1.1 [Avoid Boolean Prop Proliferation](#11-avoid-boolean-prop-proliferation)
• 1.2 [Use Compound Components](#12-use-compound-components)

1. [State Management](#2-state-management) — MEDIUM

• 2.1 [Decouple State Management from UI](#21-decouple-state-management-from-ui)
• 2.2 [Define Generic Context Interfaces for Dependency Injection](#22-define-generic-context-interfaces-for-dependency-injection)
• 2.3 [Lift State into Provider Components](#23-lift-state-into-provider-components)

1. [Implementation Patterns](#3-implementation-patterns) — MEDIUM

• 3.1 [Create Explicit Component Variants](#31-create-explicit-component-variants)
• 3.2 [Prefer Composing Children Over Render Props](#32-prefer-composing-children-over-render-props)

1. [React 19 APIs](#4-react-19-apis) — MEDIUM

• 4.1 [React 19 API Changes](#41-react-19-api-changes)

---

1. Component Architecture

Impact: HIGH

Fundamental patterns for structuring components to avoid prop proliferation and enable flexible composition.

1.1 Avoid Boolean Prop Proliferation

Impact: CRITICAL (prevents unmaintainable component variants)

Don't add boolean props like isThread, isEditing, isDMThread to customize component behavior. Each boolean doubles possible states and creates unmaintainable conditional logic. Use composition instead.

Incorrect: boolean props create exponential complexity

const Composer = ({
  onSubmit,
  isThread,
  channelId,
  isDMThread,
  dmId,
  isEditing,
  isForwarding
}: Props) => {
  return (
    
      
      
      {isDMThread ? (
        
      ) : isThread ? (
        
      ) : null}
      {isEditing ? (
        
      ) : isForwarding ? (
        
      ) : (
        
      )}
      
    
  )
}

Correct: composition eliminates conditionals

// Channel composer
const ChannelComposer = () => {
  return (
    
      
      
      
        
        
        
        
      
    
  )
}

// Thread composer - adds "also send to channel" field
const ThreadComposer = ({ channelId }: { channelId: string }) => {
  return (
    
      
      
      
      
        
        
        
      
    
  )
}

// Edit composer - different footer actions
const EditComposer = () => {
  return (
    
      
      
        
        
        
        
      
    
  )
}

Each variant is explicit about what it renders. We can share internals without sharing a single monolithic parent.

1.2 Use Compound Components

Impact: HIGH (enables flexible composition without prop drilling)

Structure complex components as compound components with a shared context. Each subcomponent accesses shared state via context, not props. Consumers compose the pieces they need.

Incorrect: monolithic component with render props

const Composer = ({
  renderHeader,
  renderFooter,
  renderActions,
  showAttachments,
  showFormatting,
  showEmojis
}: Props) => {
  return (
    
      {renderHeader?.()}
      
      {showAttachments && }
      {renderFooter ? (
        renderFooter()
      ) : (
        
          {showFormatting && }
          {showEmojis && }
          {renderActions?.()}
        
      )}
    
  )
}

Correct: compound components with shared context

const ComposerContext = createContext(null)

const ComposerProvider = ({
  children,
  state,
  actions,
  meta
}: ProviderProps) => {
  return (
    
      {children}
    
  )
}

const ComposerFrame = ({ children }: { children: React.ReactNode }) => {
  return {children}
}

const ComposerInput = () => {
  const {
    state,
    actions: { update },
    meta: { inputRef }
  } = use(ComposerContext)
  return (
     update((s) => ({ ...s, input: text }))}
    />
  )
}

const ComposerSubmit = () => {
  const {
    actions: { submit }
  } = use(ComposerContext)
  return Send
}

// Export as compound component
const Composer = {
  Provider: ComposerProvider,
  Context: ComposerContext, // exported for external consumers (e.g. buttons outside Frame)
  Frame: ComposerFrame,
  Input: ComposerInput,
  Submit: ComposerSubmit,
  Header: ComposerHeader,
  Footer: ComposerFooter,
  Attachments: ComposerAttachments,
  Formatting: ComposerFormatting,
  Emojis: ComposerEmojis
}

Usage:

Consumers explicitly compose exactly what they need. No hidden conditionals. And the state, actions and meta are dependency-injected by a parent provider, allowing multiple usages of the same component structure.

---

2. State Management

Impact: MEDIUM

Patterns for lifting state and managing shared context across composed components.

2.1 Decouple State Management from UI

Impact: MEDIUM (enables swapping state implementations without changing UI)

The provider component should be the only place that knows how state is managed. UI components consume the context interface — they don't know if state comes from useState, Zustand, or a server sync.

Incorrect: UI coupled to state implementation

const ChannelComposer = ({ channelId }: { channelId: string }) => {
  // UI component knows about global state implementation
  const state = useGlobalChannelState(channelId)
  const { submit, updateInput } = useChannelSync(channelId)

  return (
    
       sync.updateInput(text)}
      />
       sync.submit()} />
    
  )
}

Correct: state management isolated in provider

// Provider handles all state management details
const ChannelProvider = ({
  channelId,
  children
}: {
  channelId: string
  children: React.ReactNode
}) => {
  const { state, update, submit } = useGlobalChannel(channelId)
  const inputRef = useRef(null)

  return (
    
      {children}
    
  )
}

// UI component only knows about the context interface
const ChannelComposer = () => {
  return (
    
      
      
      
        
      
    
  )
}

// Usage
const Channel = ({ channelId }: { channelId: string }) => {
  return (
    
      
    
  )
}

Different providers, same UI:

// Local state for ephemeral forms
const ForwardMessageProvider = ({ children }) => {
  const [state, setState] = useState(initialState)
  const forwardMessage = useForwardMessage()

  return (
    
      {children}
    
  )
}

// Global synced state for channels
const ChannelProvider = ({ channelId, children }) => {
  const { state, update, submit } = useGlobalChannel(channelId)

  return (
    
      {children}
    
  )
}

The same Composer.Input component works with both providers because it only depends on the context interface, not the implementation.

2.2 Define Generic Context Interfaces for Dependency Injection

Impact: HIGH (enables dependency-injectable state across use-cases)

Define a generic interface for your component context with three parts: state, actions, and meta. This interface is a contract that any provider can implement — enabling the same UI components to work with completely different state implementations.

Core principle: Lift state, compose internals, make state dependency-injectable.

Incorrect: UI coupled to specific state implementation

const ComposerInput = () => {
  // Tightly coupled to a specific hook
  const { input, setInput } = useChannelComposerState()
  return 
}

Correct: generic interface enables dependency injection

// Define a GENERIC interface that any provider can implement
interface ComposerState {
  input: string
  attachments: Attachment[]
  isSubmitting: boolean
}

interface ComposerActions {
  update: (updater: (state: ComposerState) => ComposerState) => void
  submit: () => void
}

interface ComposerMeta {
  inputRef: React.RefObject
}

interface ComposerContextValue {
  state: ComposerState
  actions: ComposerActions
  meta: ComposerMeta
}

const ComposerContext = createContext(null)

UI components consume the interface, not the implementation:

const ComposerInput = () => {
  const {
    state,
    actions: { update },
    meta
  } = use(ComposerContext)

  // This component works with ANY provider that implements the interface
  return (
     update((s) => ({ ...s, input: text }))}
    />
  )
}

Different providers implement the same interface:

// Provider A: Local state for ephemeral forms
const ForwardMessageProvider = ({
  children
}: {
  children: React.ReactNode
}) => {
  const [state, setState] = useState(initialState)
  const inputRef = useRef(null)
  const submit = useForwardMessage()

  return (
    
      {children}
    
  )
}

// Provider B: Global synced state for channels
const ChannelProvider = ({ channelId, children }: Props) => {
  const { state, update, submit } = useGlobalChannel(channelId)
  const inputRef = useRef(null)

  return (
    
      {children}
    
  )
}

The same composed UI works with both:

// Works with ForwardMessageProvider (local state)

  
    
    
  

// Works with ChannelProvider (global synced state)

  
    
    
  

Custom UI outside the component can access state and actions:

const ForwardMessageDialog = () => {
  return (
    
      
        {/* The composer UI */}
        
          
          
            
            
          
        

        {/* Custom UI OUTSIDE the composer, but INSIDE the provider */}
        

        {/* Actions at the bottom of the dialog */}
        
          
          
        
      
    
  )
}

// ComposerContext is exported from the Composer module for external consumers
// This button lives OUTSIDE Composer.Frame but can still submit based on its context!
const ForwardButton = () => {
  const {
    actions: { submit }
  } = use(ComposerContext)
  return Forward
}

// This preview lives OUTSIDE Composer.Frame but can read composer's state!
const MessagePreview = () => {
  const { state } = use(ComposerContext)
  return 
}

The provider boundary is what matters — not the visual nesting. Components that need shared state don't have to be inside the Composer.Frame. They just need to be within the provider.

The ForwardButton and MessagePreview are not visually inside the composer box, but they can still access its state and actions. This is the power of lifting state into providers.

The UI is reusable bits you compose together. The state is dependency-injected by the provider. Swap the provider, keep the UI.

2.3 Lift State into Provider Components

Impact: HIGH (enables state sharing outside component boundaries)

Move state management into dedicated provider components. This allows sibling components outside the main UI to access and modify state without prop drilling or awkward refs.

Incorrect: state trapped inside component

const ForwardMessageComposer = () => {
  const [state, setState] = useState(initialState)
  const forwardMessage = useForwardMessage()

  return (
    
      
      
    
  )
}

// Problem: How does this button access composer state?
const ForwardMessageDialog = () => {
  return (
    
      
       {/* Needs composer state */}
      
        
         {/* Needs to call submit */}
      
    
  )
}

Incorrect: useEffect to sync state up

const ForwardMessageDialog = () => {
  const [input, setInput] = useState('')
  return (
    
      
      
    
  )
}

const ForwardMessageComposer = ({ onInputChange }) => {
  const [state, setState] = useState(initialState)
  useEffect(() => {
    onInputChange(state.input) // Sync on every change
  }, [state.input])
}

Incorrect: reading state from ref on submit

const ForwardMessageDialog = () => {
  const stateRef = useRef(null)
  return (
    
      
       submit(stateRef.current)} />
    
  )
}

Correct: state lifted to provider

const ForwardMessageProvider = ({
  children
}: {
  children: React.ReactNode
}) => {
  const [state, setState] = useState(initialState)
  const forwardMessage = useForwardMessage()
  const inputRef = useRef(null)

  return (
    
      {children}
    
  )
}

const ForwardMessageDialog = () => {
  return (
    
      
        
        
        
          
          
        
      
    
  )
}

const ForwardButton = () => {
  const { actions } = use(Composer.Context)
  return Forward
}

The ForwardButton lives outside the Composer.Frame but still has access to the submit action because it's within the provider. Even though it's a one-off component, it can still access the composer's state and actions from outside the UI itself.

Key insight: Components that need shared state don't have to be visually nested inside each other — they just need to be within the same provider.

---

3. Implementation Patterns

Impact: MEDIUM

Specific techniques for implementing compound components and context providers.

3.1 Create Explicit Component Variants

Impact: MEDIUM (self-documenting code, no hidden conditionals)

Instead of one component with many boolean props, create explicit variant components. Each variant composes the pieces it needs. The code documents itself.

Incorrect: one component, many modes

// What does this component actually render?

Correct: explicit variants

// Immediately clear what this renders

// Or

// Or

Each implementation is unique, explicit and self-contained. Yet they can each use shared parts.

Implementation:

const ThreadComposer = ({ channelId }: { channelId: string }) => {
  return (
    
      
        
        
        
          
          
          
        
      
    
  )
}

const EditMessageComposer = ({ messageId }: { messageId: string }) => {
  return (
    
      
        
        
          
          
          
          
        
      
    
  )
}

const ForwardMessageComposer = ({ messageId }: { messageId: string }) => {
  return (
    
      
        
        
          
          
          
        
      
    
  )
}

Each variant is explicit about:

• What provider/state it uses
• What UI elements it includes
• What actions are available

No boolean prop combinations to reason about. No impossible states.

3.2 Prefer Composing Children Over Render Props

Impact: MEDIUM (cleaner composition, better readability)

Use children for composition instead of renderX props. Children are more readable, compose naturally, and don't require understanding callback signatures.

Incorrect: render props

const Composer = ({
  renderHeader,
  renderFooter,
  renderActions
}: {
  renderHeader?: () => React.ReactNode
  renderFooter?: () => React.ReactNode
  renderActions?: () => React.ReactNode
}) => {
  return (
    
      {renderHeader?.()}
      
      {renderFooter ? renderFooter() : }
      {renderActions?.()}
    
  )
}

// Usage is awkward and inflexible
return (
   }
    renderFooter={() => (
      <>
        
        
      
    )}
    renderActions={() => }
  />
)

**Correct: compound components wi

…

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: LerianStudio
• Source: LerianStudio/ring
• License: Apache-2.0
• Homepage: https://lerian.studio

Install and usage instructions live in the source repository linked above.