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 · WWC 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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
about 1 month 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

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

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

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

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

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

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

From Idea to Production with AI: Agentic Development in Practice

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

AI That Argues With Itself: Building Self-Debating Systems That Catch Their Own Bugs

Shreya Singhal

AI Applied Scientist at Claritev

Shreya Singhal

Related videos

The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems thumbnail
20:49
Europe 2026 Virtual • about 1 month 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
WWC 2022 • about 4 years ago

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

Nathalia Rus

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more thumbnail
1:06:20
LIVE • 9 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
WWC 2025 • 12 months ago

The Journey of a Pixel in a React Application

Shem Magnezi

But, you're not Facebook thumbnail
31:12
WWC 2022 • about 4 years ago

But, you're not Facebook

Kristijan Ristovski

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.