Use when reasoning about React's rendering model, understanding the component tree, or debugging unexpected update behavior. Prevents the common mistake of confusing React elements with components or misunderstanding render vs commit phases. Covers virtual DOM, fiber reconciler, rendering phases, element creation, component lifecycle (mount/update/unmount). Keywords: virtual DOM, fiber, reconciler, render phase, commit phase, lifecycle, how React works, rendering, virtual DOM, component tree, why does it re-render..
Instrucciones de origen · Vista previa de solo lectura
name
react-core-architecture
description
Use when reasoning about React's rendering model, understanding the component tree, or debugging unexpected update behavior. Prevents the common mistake of confusing React elements with components or misunderstanding render vs commit phases. Covers virtual DOM, fiber reconciler, rendering phases, element creation, component lifecycle (mount/update/unmount). Keywords: virtual DOM, fiber, reconciler, render phase, commit phase, lifecycle, how React works, rendering, virtual DOM, component tree, why does it re-render..
license
MIT
compatibility
Designed for Claude Code. Requires React 18.x or 19.x with TypeScript.
metadata
{"author":"OpenAEC-Foundation","version":"1.0"}
react-core-architecture
Quick Reference
Architecture Layers
Layer
Role
Key Concept
React Elements
Lightweight descriptions of UI
Immutable objects created by JSX/createElement
Components
Functions that return elements
Pure functions of props and state
Fiber Tree
Internal work-in-progress tree
Enables incremental rendering and prioritization
Reconciler
Diffing algorithm
Compares previous and next element trees
Renderer
Platform-specific output
react-dom for web, react-native for mobile
Core Principles
Principle
Rule
Unidirectional Data Flow
Data ALWAYS flows from parent to child via props
Declarative UI
ALWAYS describe what the UI should look like, NEVER imperatively mutate the DOM
Composition over Inheritance
ALWAYS compose components, NEVER use class inheritance for component reuse
Pure Rendering
The render phase MUST be a pure function of props and state
Immutable Updates
NEVER mutate state or props directly; ALWAYS create new references
React Element vs Component
Concept
What It Is
Example
React Element
Immutable plain object describing a DOM node or component
{ type: 'div', props: { children: 'Hello' } }
Component
Function that accepts props and returns React elements
function Greeting({ name }: Props) { return <h1>{name}</h1>; }
Fiber
Internal mutable work unit tracking a component instance
Not directly accessible; managed by React internals
Critical Warnings
NEVER mutate state or props during rendering -- rendering MUST be a pure calculation. Mutations cause inconsistent UI and break concurrent features.
NEVER rely on render timing or count -- React MAY call your component multiple times, skip renders, or pause and resume rendering. StrictMode double-invokes components in development.
NEVER perform side effects in the render phase (network requests, subscriptions, DOM mutations) -- ALWAYS use useEffect or event handlers for side effects.
NEVER use inheritance to share behavior between components -- ALWAYS use composition (children, render props, or custom hooks).
NEVER call root.render() where hydrateRoot() is needed -- for server-rendered HTML, ALWAYS use hydrateRoot to preserve server markup and attach event handlers.
NEVER assume synchronous DOM updates after root.render() -- rendering is asynchronous. Use flushSync() ONLY when synchronous behavior is explicitly required.
Rendering Model
JSX Compilation
JSX is syntactic sugar for React.createElement() calls:
Each fiber node represents a component instance and contains:
type -- the component function or host element tag
stateNode -- the DOM node (for host elements) or component instance
child, sibling, return -- tree navigation pointers
memoizedState -- the linked list of hooks for this component
pendingProps, memoizedProps -- current and previous props
lanes -- priority bits for scheduling (React 18+)
NEVER access fiber internals directly -- they are private implementation details that change between React versions.
Component Lifecycle
Function Component Lifecycle
Mount: Component called -> Elements created -> DOM inserted -> Effects run
Update: State/props change -> Component re-called -> Reconciliation -> DOM patched -> Effects re-run
Unmount: Effect cleanups run -> DOM removed
Phase
What Runs
When
Mount
Component function, then useEffect callbacks
First render, after DOM insertion
Update
Component function, then useEffect cleanups + callbacks (if deps changed)
Data flows DOWN through props. Communication UP happens through callback functions passed as props. NEVER pass data upward by mutating parent state from a child without using a callback.
StrictMode Behavior (Development Only)
Check
Method
Purpose
Impure rendering
Double-invokes component functions
Catches render-phase mutations
Missing effect cleanup
Runs setup -> cleanup -> setup cycle
Catches missing cleanup functions
Missing ref cleanup
Double ref callback cycle
Catches ref-related memory leaks
Deprecated APIs
Static warnings
Flags legacy lifecycle methods
StrictMode checks run ONLY in development. They have zero impact on production builds.
