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

Introduction

This tutorial focuses on the power of composition in React, as demonstrated by Fernando Rojo at the React Universe Conf 2025. Composition is essential for building scalable, maintainable codebases that can handle complex user interfaces. This guide will walk you through key concepts and techniques to improve your React components by embracing composition, reducing complexity, and enhancing collaboration with AI tools.

Step 1: Understand the Pitfalls of Conditional Props

• Conditional props, such as isEditing or shouldRenderButton, can lead to what is known as "boolean prop hell."
• These props make components rigid and difficult to maintain, resulting in:
  • Increased complexity as more conditions are added.
  • Poor readability and understanding of component behavior.

Tip: Assess your current components for the use of boolean props and consider how they can be simplified.

Step 2: Analyze Real-World UI Challenges

• Examine how popular applications like Slack manage complex UIs.
• Conditional rendering often leads to messy code as conditions for rendering UI elements multiply.
• Instead of relying on conditionals, consider how smaller, composable components can improve clarity and maintainability.

Common Pitfall: Avoid creating monolithic components that handle too many responsibilities.

Step 3: Adopt a Compositional Approach

• Break down large components into smaller, flexible ones that can be easily reused and tested.
• Define interfaces for these components that allow for easy composition without relying on multiple props.
• This approach encourages better organization and a clearer structure in your codebase.

Example of a Composable Component:

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>
    {children}
  </button>
);

Step 4: Manage State Effectively

• Differentiate between local and global state management.
• Use local state for ephemeral data that does not need to persist across sessions.
• For global state, consider using state management libraries like Redux or Context API to synchronize data across devices.

Practical Tip: Use hooks like useState and useReducer for local state management in functional components.

Step 5: Make Your Codebase AI-Friendly

• Composition not only helps humans work better with code but also enhances AI tools' ability to assist developers.
• By simplifying components, AI can more easily understand and generate code.
• Leverage AI tools for pair programming and code generation, which can speed up development.

Real-World Application: Consider using AI prompts to assist in writing tests or generating new component variations based on simpler existing ones.

Conclusion

Embracing composition in React can significantly improve your code quality and maintainability. By avoiding boolean prop hell, adopting smaller components, managing state effectively, and making your codebase more AI-friendly, you'll create a more scalable and collaborative development environment. As you refactor your components, keep these principles in mind to enhance both your productivity and your application's performance. Consider exploring further resources or tools that support compositional design in React to deepen your understanding.