> Markdown version of [/videos/100180-the-two-trees-of-react?t=636](https://www.wearedevelopers.com/videos/100180-the-two-trees-of-react?t=636). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# The two trees of React

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.

- **Speakers:** [Carl Assmann](https://www.wearedevelopers.com/@carl-assmann)
- **Event:** World Congress 2026 Europe
- **Published:** July 9, 2026
- **Duration:** 19:22
- **URL:** https://www.wearedevelopers.com/videos/100180-the-two-trees-of-react

## Summary

React and modern front-end frameworks encourage developers to conceptualize their user interfaces as trees. However, perfectly mirroring the visual UI tree in the underlying component architecture often yields deeply nested code that scatters critical product decisions across multiple files, severely hindering maintainability and debugging. The solution leverages differentiating the "UI tree" (the visual layout in the DOM) from the "ownership tree" (where product decision logic lives). Engineering teams can intentionally keep the ownership tree shallow by relying heavily on React composition, render props, and slot patterns to elevate specific rendering decisions—like mapping data lists, inserting fallbacks, or triggering empty states—directly up to the screen or feature level.\n\nEstablishing a flat, shallow ownership tree enforces the creation of context-dense modules. Because single files comprehensively reveal local UI states, it transforms the development experience for both human engineers and AI coding agents. Agents perform exponentially better when navigating shallow architectures because they no longer suffer context fragmentation across cascading file dependencies. When a screen component encompasses its own entire conditional rendering logic, AI tooling can interpret and generate precise modifications without tracing five isolated sub-levels of child layout variations.\n\nTo strictly enforce these architectural boundaries, engineering workflows should abandon subjective reliance on natural language AI prompts or soft guidelines, which agents frequently bypass. Instead, teams should implement custom ESLint rules to statically enforce acceptable module imports—for example, explicitly preventing foundational "parts" from inadvertently importing complex UI "widgets." Teams can even leverage AI to author and iterate on these specific structural linter rules based on code review findings. As Carl Asman notes, "The ownership tree does not represent what is nested in the DOM... it represents where the decisions live." Translating subjective architectural tastes into objective static code constraints guarantees a consistently scaled, highly maintainable frontend product.

**Keywords:** react component composition, ui tree vs ownership tree, shallow ownership architecture, render props pattern, react application performance, custom eslint rules, ai coding agents context, enforcing frontend architecture, feature folder structural scoping, context-dense modules, frontend static code analysis, virtualized list handling, architectural import boundaries, react component encapsulation, ai generated code validation

## Chapters

1. **The problem with deeply nested UI components** (01:48) — Mimicking visual structures with component layers fragments application state, so developers must decouple logic mapping from display mapping.
1. **The UI tree versus the ownership tree architecture** (05:41) — Abstracting the visual structure away from the decision-making logic establishes a flat framework that retains conceptual clarity.
1. **Designing feature folders and shallow hierarchy rules** (06:40) — Organizing logic by distinct features and strictly limiting component depth enforces immediately comprehensible architectural boundaries.
1. **Elevating product decisions through React composition patterns** (07:38) — Using slots, render props, and callbacks eliminates nested dependencies by elevating stateful decisions to the screen layer.
1. **Writing context-dense frontend code for AI agents** (10:36) — Providing context-dense modules guarantees that artificial assistants parse business rules comprehensively without traversing separated execution files.
1. **Enforcing component architecture with ESLint import constraints** (11:26) — Applying strict linting barriers on code module imports establishes explicit automated guardrails against synthetic code generation errors.
1. **Using AI assistants to generate custom ESLint rules** (13:55) — Hand-crafting architectural demonstrations provides semantic templates that reliably direct large language models to construct accurate customized validations.
1. **Takeaways on flat ownership trees and readable components** (15:26) — Shifting away from deep visual hierarchies creates sustainable interface constraints optimized for scalable automated algorithmic maintenance.
1. **Balancing locality of behavior with React component file size** (16:40) — Extracting and prioritizing top-level logic keeps behavioral locality intact without inadvertently producing heavily bloated codebase files.
1. **Choosing ESLint over dedicated architectural component testing libraries** (18:23) — Integrating native front-end analysis infrastructure simplifies evaluating dependency limitations constructed by artificial intelligence testing methodologies.

## Related Moments

- [Analyzing excessive context provider nesting in complex React applications](https://www.wearedevelopers.com/videos/1753-wearedevelopers-live-spicy-vanilla-web-css-magic-more) (from "WeAreDevelopers LIVE – Spicy Vanilla Web, CSS Magic & More")
- [Recreating React components using AI and dev tools](https://www.wearedevelopers.com/videos/1786-wearedevelopers-live-ai-freelancing-keeping-up-with-tech-and-more) (from "WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More")
- [Maintaining separation of concerns in modern UI frameworks](https://www.wearedevelopers.com/videos/1340-wearedevelopers-live-performance-and-ai-social-media-decline-developer-events-and-more) (from "WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more")
- [Performance and architectural drawbacks of React context](https://www.wearedevelopers.com/videos/13-state-management-in-a-world-of-hooks) (from "State management in a world of hooks")
- [Exploring tooling choices for interactive UI components](https://www.wearedevelopers.com/videos/1589-building-interactive-async-ui-with-react-19-and-ariakit) (from "Building Interactive Async UI with React 19 and Ariakit")
- [Structuring components in a React and Gatsby project](https://www.wearedevelopers.com/videos/2101-the-pragmatic-architect-balancing-necessity-vs-sufficiency-in-react-systems) (from "The Pragmatic Architect: Balancing Necessity vs. Sufficiency in React Systems")

## Related Articles

- [How to Avoid Over-Engineering](https://www.wearedevelopers.com/magazine/546-how-to-avoid-over-engineering)
- [The HTML Elements That You’re Probably Over-Engineering](https://www.wearedevelopers.com/magazine/646-the-html-elements-that-you-re-probably-over-engineering)
- [16 Best Free React UI Libraries in 2025](https://www.wearedevelopers.com/magazine/148-16-best-free-react-ui-libraries-in-2025)
- [Dev Digest 120 - Apple and peers](https://www.wearedevelopers.com/magazine/455-dev-digest-120-apple-and-peers)

## Related Jobs

- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Senior Software Engineer, React (Investing & Trading)](https://www.wearedevelopers.com/jobs/ext/1937625-senior-software-engineer-react-investing-trading) at **Bitpanda**
- [React Engineer for Next.js UI - Hybrid, Impactful FinTech](https://www.wearedevelopers.com/jobs/ext/1444505-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [React Engineer For Next.Js Ui - Hybrid, Impactful Fintech](https://www.wearedevelopers.com/jobs/ext/1934580-react-engineer-for-next-js-ui-hybrid-impactful-fintech) at **Bitpanda**
- [Senior Software Engineer, React (Websites & Martech)](https://www.wearedevelopers.com/jobs/ext/1605272-senior-software-engineer-react-websites-martech) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda**