React

Definition

React is a JavaScript library for building user interfaces from composable components. It describes UI declaratively in JSX, tracks state immutably, and re-renders efficiently by diffing a virtual representation of the DOM.

---

Core Ideas

JSX

Markup-in-JavaScript. HTML attributes are camelCased and renamed where they collide with JS keywords: class → className, tabindex → tabIndex. Conditional rendering leans on JS semantics — true && expr evaluates to expr, false && expr to false.

Immutability & re-rendering

Treating state as immutable makes complex features simpler: it enables cheap change detection and lets React decide when to re-render (the basis of shouldComponentUpdate). Mutating state in place defeats this.

Data flow & state

• Unidirectional (“top-down”) data flow — state flows down through props; a component’s statefulness is an implementation detail that can change over time (stateful and stateless components nest freely).
• State updates may be asynchronous — don’t rely on this.state immediately after setState.
• Keys — needed for list items; avoid using array indexes as keys when order can change.
• this binding — in class components, bind handlers (this.handleClick = this.handleClick.bind(this)) or the callback’s this is undefined.
• Deeply nested map() bodies are a signal to extract a component.

Concurrent Mode & code-splitting

React can work on several state updates concurrently, keeping the UI responsive. React.lazy + Suspense enable component-level code splitting (e.g. with React Router). Avoid conditionally applying React.forwardRef — it changes library behavior across React upgrades.

---

Relationships

• TypeScript — commonly paired with React for typed components
• JavaScript Design Patterns — Provider, HOC, render props, compound components, and the HOC-vs-Hooks decision rule
• Web Rendering and Performance Patterns — Server Components, selective hydration, and streaming SSR
• Backend for Frontend — tailored APIs serving React clients
• Observability — browser/RUM monitoring of React apps (Core Web Vitals)
• Software Engineering Practices

---

References

• Rendering Elements — React
• Introducing Concurrent Mode (Experimental) — React