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 +2 · LIVE

3:31 min

Recreating React components using AI and dev tools

Chris Heilmann +2 · LIVE

5:25 min

Maintaining separation of concerns in modern UI frameworks

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

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Stage 3

Sandboxing the Swarm: Building Secure, Serverless AI Agents with Wasm

Thorsten Hans

Sr. Developer Advocate @ Akamai Technologies

Thorsten Hans
Open session

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Stage 1

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

September 24, 2026 · 16:50–17:20

Mainstage

Building AI Products vs. Building With AI

Aparna Dhinakaran, Rukmini Reddy, Tamar Bercovici

Aparna Dhinakaran
Rukmini Reddy
Tamar Bercovici
Open session

World Congress 2026 North America

September 24, 2026 · 13:30–14:00

Stage 4

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

September 25, 2026 · 11:40–12:10

Outdoor Stage

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths

Related videos

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • 3 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 • 3 months ago

Developing a clean architecture-inspired React application with MVVM

Marc Brehmer

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

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney, Jan Deppisch

The Journey of a Pixel in a React Application thumbnail
27:01
World Congress 2025 • about 1 year ago

The Journey of a Pixel in a React Application

Shem Magnezi

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.