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

Summary

This video discusses improving React component design by using composition rather than passing numerous props and managing state with complex conditions. The speaker uses the example of Slack’s message composer, showcasing how different types of composers (e.g., for channels, threads, and message edits) quickly become messy with deep conditionals. The solution lies in breaking components into smaller, reusable parts with a provider-driven state management pattern, making the code more maintainable and flexible. Ultimately, the video emphasizes the power of composition for simplifying React code and improving collaboration with AI in development.

Takeaways

• 😀 Avoid overloading components with multiple boolean props; it leads to messy and hard-to-maintain code.
• 😀 Use composition to break down large, complex components into smaller, reusable pieces.
• 😀 A provider pattern with React Context can manage state efficiently across complex components without prop drilling.
• 😀 JSX can be used directly for rendering UI elements and actions instead of maintaining arrays of conditional items.
• 😀 Shared components, like footers or common actions, should be modular to simplify code reuse and reduce complexity.
• 😀 Lifting state higher in the component tree allows unrelated components to access shared state and actions without passing props through multiple layers.
• 😀 Each instance of a component can have different UI or state behavior while still reusing the same internal structure through context.
• 😀 Managing ephemeral versus global state requires thoughtful placement of state handlers depending on whether data should persist across sessions or devices.
• 😀 Composition improves maintainability and reduces bugs, making it easier for both humans and AI to work with the code.
• 😀 AI tools can effectively generate and edit React code when guided with a compositional approach, resulting in fewer errors and more productive development.
• 😀 Minimizing conditional logic and favoring explicit component trees enhances readability and scalability of React applications.
• 😀 The use of context providers and modular components decouples UI rendering from state implementation, allowing flexible swapping of state management solutions.

Q & A

What is the main challenge when dealing with complex forms in React?

The main challenge is managing large components with complex states and rendering logic, especially when forms evolve into components with multiple conditional states, leading to a tangled and difficult-to-maintain codebase.

Why is the Slack composer example used in the talk?

The Slack composer is used as an example because it has various states based on context, such as DM, threads, and message editing. This variability highlights the challenge of managing complex UI and logic without introducing deep conditional props and states.

What is the problem with passing multiple boolean props to components?

Passing multiple boolean props leads to convoluted logic in components, often resulting in excessive ternary conditions and difficult-to-manage code. This makes the component hard to maintain and extend over time, as it can easily become riddled with conditional checks.

How does the speaker suggest solving the problem of complex conditional rendering?

The speaker suggests using composition instead of passing multiple boolean props. By breaking components into smaller, more focused pieces, they can be recombined for different use cases, avoiding unnecessary conditionals and creating more maintainable code.

What role does context play in managing state in React?

Context is used to provide shared state that can be accessed by various components without needing to prop-drill. This allows for cleaner state management across the component tree, making it easier to share and modify state in a centralized way.

What is the significance of the Forward Message Composer example?

The Forward Message Composer example demonstrates how to manage ephemeral state locally within a component, while also allowing actions outside the component to access the state via context. This approach avoids complex prop passing and keeps the code modular and scalable.

How does the speaker use AI to enhance their development workflow?

The speaker uses an AI tool called Vzero to assist with building their chess app, specifically by prompting it to focus on composition for state management and rendering. This allows them to reduce bugs and improve the quality of their code while pairing with the AI in real-time during development.

What does the speaker mean by 'pair programming with AI'?

By 'pair programming with AI,' the speaker means using AI as a collaborative tool during development. Instead of just generating code, the AI helps write clean, maintainable code by adhering to composition principles, ultimately reducing the chances of bugs and improving productivity.

How does the composition pattern help avoid deep prop passing?

Composition allows components to be broken down into smaller, reusable pieces that can be combined for different contexts. This approach avoids the need for deep prop passing, as components can rely on context or shared state rather than individual prop values, simplifying the logic and making the code more flexible.

What is the overall takeaway from the talk regarding component design in React?

The overall takeaway is that composition should be favored over passing deep boolean props to manage component states. This approach leads to cleaner, more maintainable code and makes it easier to manage complex components by breaking them down into smaller, reusable pieces with a shared state via context.