Composition Is All You Need | Fernando Rojo at React Universe Conf 2025

Composition for Complex React Components

Fernando Rojo argues that composition is a more maintainable way to build complex React components than adding increasingly many boolean props.

The problem with boolean props

A reusable form or Slack-like message composer can accumulate flags such as isEditing, isThread, or isForwarding. As new use cases add different UI, behavior, and state requirements, conditions spread throughout the component tree, making the code harder to understand and change.

Build UIs from composed pieces

Rather than creating one configurable monolith, Rojo demonstrates assembling each composer from smaller components—for example, a provider, frame, header, input, footer, drop zone, and individual actions. JSX makes it straightforward to include only the pieces each use case needs.

Shared pieces, such as common actions, can be grouped into reusable components. Callers can still render individual actions when they need a different arrangement; reuse does not require forcing every case through the same abstraction.

Separate the state interface from its implementation

A context provider can expose a common set of state and actions to composer components while allowing the provider’s owner to choose how that state works. A forwarding modal might use local React state, while a channel composer uses a hook backed by globally synchronized state. The UI can stay the same even when the state mechanism changes.

When controls outside the composer need access to its state or actions, the provider can be placed higher in the React tree. Those controls can then use the context without passing values through multiple components or wiring state back up with effects.

React Compiler and AI-assisted development

Rojo notes that the React Compiler can optimize components that read from context, and shows its playground output as an example.

He also argues that clear, compositional code helps both developers and AI tools work in larger codebases. He describes using AI to build a chess app and says that asking it to rely on composition improved its output and made the code more enjoyable to edit.

Context and source

The Slack composer is an illustrative example; Rojo says he does not know Slack’s actual implementation. The talk is a technical guide and analysis rather than a product review.

Speaker: Fernando Rojo, presenting at React Universe Conf 2025. The conference is brought to viewers by Callstack.