A JavaScript library for building user interfaces, developed by Meta. It lets you compose UIs from reusable components, manage state declaratively, and update the DOM efficiently through a virtual representation. React is the foundation of countless web applications and the entry point to the modern front-end ecosystem.
The children prop is the mechanism React uses to pass content between a component’s opening and closing tags. Every component that wraps other content receives that content on props.children, and how it uses that value determines whether the component is a simple wrapper, a layout container, or a composition primitive. Understanding children is understanding how…
React events are not DOM events. When you write onClick in JSX, you are not attaching a listener with addEventListener. React uses a synthetic event system that wraps the native browser event, normalizes its behavior across browsers, and delivers it through React’s own dispatch mechanism. Understanding this distinction matters because it explains why React event…
Event handlers are functions, and functions are values in JavaScript. This means a function defined in a parent component can be passed to a child component as a prop, and the child can call it when an event occurs. This pattern — passing handlers as props — is how data flows upward in React. Props…
When you write an event handler in React, the object you receive is not the browser’s native event. It is a SyntheticEvent, a wrapper that React creates around the native event. The wrapper exposes the same interface — target, preventDefault(), stopPropagation(), type — but it is a plain JavaScript object that React controls. Understanding the…
State is the data a component owns and can change over time. Props are read-only and come from the parent; state is mutable and belongs to the component itself. When a component’s state changes, React re-renders the component with the new values, and the UI reflects the change. This is the mechanism that makes React…
State in React is the data a component owns and can change over time. The primitive values — strings, numbers, booleans — are the simplest form of state, and they are where most React state work begins. Updating a primitive is straightforward: call the setter returned by useState with the new value. But the details…
When a state update depends on the previous value, React provides a functional form of the setter that receives the current state as its argument. This is not a stylistic preference; it is the correct way to express the update when the new value is derived from the old one. The direct form — reading…
Objects in React state are updated by replacement, not by mutation. An object held in state is treated as immutable: when a change is needed, a new object is created with the changed property and the remaining properties copied from the old one. React compares the old and new references to detect the change, and…
Arrays in React state follow the same rule as objects: they are updated by replacement, not by mutation. The array methods that modify in place — push, pop, splice, sort, reverse, and direct index assignment — do not trigger a re-render, because they leave the array reference unchanged. React compares the new state to the…
Conditional rendering is the practice of choosing what to render based on the application’s state. React components are functions, and JavaScript’s control flow is available inside them. The if statement, the ternary operator, the logical && operator, and the switch statement are all valid ways to decide what a component returns. The choice between them…