WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2026 Europe • Jul 9, 2026 • Session details

The two trees of React

Carl Assmann

Carl Asman explains why mirroring the visual DOM in your React components destroys maintainability. Learn how a shallow ownership tree accelerates development for both human engineers and AI agents.

Pause
Mute Enter Fullscreen
#1 about 4 min

The problem with deeply nested UI components

Mimicking visual structures with component layers fragments application state, so developers must decouple logic mapping from display mapping.

#2 about 1 min

The UI tree versus the ownership tree architecture

Abstracting the visual structure away from the decision-making logic establishes a flat framework that retains conceptual clarity.

#3 about 1 min

Designing feature folders and shallow hierarchy rules

Organizing logic by distinct features and strictly limiting component depth enforces immediately comprehensible architectural boundaries.

#4 about 3 min

Elevating product decisions through React composition patterns

Using slots, render props, and callbacks eliminates nested dependencies by elevating stateful decisions to the screen layer.

#5 about 1 min

Writing context-dense frontend code for AI agents

Providing context-dense modules guarantees that artificial assistants parse business rules comprehensively without traversing separated execution files.

#6 about 3 min

Enforcing component architecture with ESLint import constraints

Applying strict linting barriers on code module imports establishes explicit automated guardrails against synthetic code generation errors.

#7 about 2 min

Using AI assistants to generate custom ESLint rules

Hand-crafting architectural demonstrations provides semantic templates that reliably direct large language models to construct accurate customized validations.

#8 about 2 min

Takeaways on flat ownership trees and readable components

Shifting away from deep visual hierarchies creates sustainable interface constraints optimized for scalable automated algorithmic maintenance.

#9 about 2 min

Balancing locality of behavior with React component file size

Extracting and prioritizing top-level logic keeps behavioral locality intact without inadvertently producing heavily bloated codebase files.

#10 about 1 min

Choosing ESLint over dedicated architectural component testing libraries

Integrating native front-end analysis infrastructure simplifies evaluating dependency limitations constructed by artificial intelligence testing methodologies.

Matching moments

2:45 min

Analyzing excessive context provider nesting in complex React applications

Chris Heilmann Chris Heilmann +2 · LIVE

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann Chris Heilmann +2 · LIVE

5:25 min

Maintaining separation of concerns in modern UI frameworks

Chris Heilmann Chris Heilmann +2 · LIVE

4:02 min

Performance and architectural drawbacks of React context

Adam Klein · LIVE

1:20 min

Exploring tooling choices for interactive UI components

Aurora Scharff Aurora Scharff · World Congress 2025

2:33 min

Structuring components in a React and Gatsby project

Ana Gil Amor Ana Gil Amor · Europe 2026 Virtual

More from World Congress 2026 Europe

Building the Nervous System of AI - Michael Kagan (NVIDIA) thumbnail
29:17
3 months ago

Building the Nervous System of AI - Michael Kagan (NVIDIA)

Michael Kagan, Sead Ahmetović

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote thumbnail
19:41
3 months ago

Five Things in Tech that Matter Now - WeAreDevelopers World Congress 2026 Closing Keynote

Christian Heilmann

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend thumbnail
32:06
3 months ago

The Sound of Your Secrets: Teaching Your Model to Spy, So You Can Learn to Defend

David vonThenen

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes thumbnail
35:13
3 months ago

Super scaling for the Super Bowl: How to survive 30 million users hitting your backend in 30 minutes

Irina Branovic

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬 thumbnail
24:23
3 months ago

Running Secure Life Science Research at Scale using Hybrid GPU HPC and Kubernetes 🧬

Jeremy Murray

Angstfreude - AI and Corporate Culture - The Thrill and the Threat thumbnail
30:26
3 months ago

Angstfreude - AI and Corporate Culture - The Thrill and the Threat

Axel Ebert, Karin Krobath

Upcoming sessions on this topic

Open session

React Under Fire: Rendering Performance for Streaming Agent UIs

  • Abhirupa Mitra

    Slack

    Senior Member of Technical Staff

Open session

From Profiler to Production: Measuring What Actually Matters in React & React Native

  • Andrei Tazetdinov

    Dynatrace

    React Native Developer

Open session

Designing for Every Direction: Logical CSS for Global, Adaptive, and Effortlessly Reversible UIs

  • Vidhya Krishnamoorthy

    Morgan Stanley

    VP, Software Engineering Manager

Open session

Teaching AI Coding Agents to Build It Right the First Time

  • Sajeetharan Sinnathurai

    Microsoft

    Principal Product Manager

Open session

How is SWE & EM roles are changing in the age of AI

  • Amol Sharma

    Stripe

    Engineering Manager

Open session

Beware of Strangers Bearing Code: Open Source Trust in the Agent Era

  • Vikram Vaswani

    Consultant

Related videos

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 4 months ago

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems

Ana Gil Amor

Typescript, React and Atomic Design - a match made in heaven thumbnail
40:05
LIVE • over 5 years ago

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned thumbnail
28:13
World Congress 2022 • over 4 years ago

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

Developing a clean architecture-inspired React application with MVVM thumbnail
41:08
Europe 2026 Virtual • 4 months ago

Developing a clean architecture-inspired React application with MVVM

Marc Brehmer

MVI: Minimum Viable Interface for React Components thumbnail
21:09
World Congress 2025 • about 1 year ago

MVI: Minimum Viable Interface for React Components

Daniel Espino Garcia

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more thumbnail
1:06:20
LIVE • 11 months ago

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney, Jan Deppisch

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.