Core Features and Capabilities

Why it matters: These features determine how you structure apps, share logic, and scale UI complexity.

• Component-Based UI: UIs are built from components, which are JavaScript functions. Functional components are just functions that return JSX. Since React 16.8, most components are written as functional components with Hooks for state and side effects, making them nearly as powerful as class components. Components let us encapsulate UI and logic, then compose them to form complex interfaces.
• Declarative Rendering: React embraces a declarative approach to UI. Developers describe what the UI should look like for a given state, and React figures out how to update the DOM to match. Rather than manually manipulating DOM elements, you re-render (by updating state/props) and let React apply changes. This leads to more predictable UIs and fewer bugs, as the UI always reflects the underlying state.
• Virtual DOM & Reconciliation: React maintains a lightweight Virtual DOM to compute minimal changes. When state or props change, it diffs the new Virtual DOM tree against the previous one, then updates only the changed parts of the real DOM. This yields fast rendering, especially for complex or frequently-changing UIs.
• One-Way Data Flow: React enforces a unidirectional data flow. Data flows downward from parent to child via props, and child components can’t directly modify their parents’ state. Instead, children trigger callbacks (passed as props) to request an update in the parent. This one-way flow makes state changes easier to track and debug, as “properties flow down, actions flow up.” It contrasts with two-way binding – in React, state is owned by a specific component and passed down, and any component that needs to modify it must do so by notifying the owner.
• Props and State: Components receive props (inputs from parents) and manage internal state (data that changes over time). Props are read-only and should not be modified by the component receiving them. State, on the other hand, is managed within the component (via useState, useReducer, or in class components via this.state). When either props or state change, React will re-render the component to reflect the new data. The guiding principle is to derive as much UI as possible from props and state within the component’s render() output, keeping the rendering pure and predictable.
• Context API: React’s Context provides a way to pass data through the component tree without drilling props at every level. It’s a lightweight dependency injection mechanism for global-like data (current user, theme, etc.). Context can be used to avoid “prop drilling” for certain props, but overusing it can cause extra re-renders. It’s best for read-heavy global data or when components at many levels need the same info (e.g. theme settings).
• Lifecycle & Effects: In React’s model, rendering is pure (no side effects), so any side effects are managed with lifecycle methods or Hooks. Functional components use Hooks like useEffect to run side-effectful code at the right times. An effect Hook may run after the render commits to the DOM. In fact, React guarantees it will flush all DOM updates to the screen before running the useEffect callbacks. This ensures that effects see the latest state and that the user sees updated UI before any effect logic (such as data fetching or logging) runs. Other lifecycle-related Hooks include useLayoutEffect (runs earlier, for layout thrashing avoidance), and cleanup functions to tidy up when a component unmounts or re-renders.
• Other Core APIs: React provides low-level utilities like React.Children (for dealing with props.children), React.cloneElement (to clone and augment elements), and Refs for direct access to DOM nodes or holding mutable values across renders. Refs (created via useRef Hook or createRef) let components imperatively access child DOM elements or persist state that doesn’t trigger re-renders. React also supports error boundaries – special components using componentDidCatch (or the <ErrorBoundary> wrapper in modern React) can catch errors in their child component tree and display a fallback UI instead of letting the error crash the whole app.
• Error Handling: React components can define error boundaries (using componentDidCatch or the ErrorBoundary component in new docs) to catch rendering errors in their subtree and display a fallback UI.
• JSX Syntax (Optional): React often uses JSX, an XML-like syntax in JavaScript. JSX is not required, but it makes templates concise (e.g. <MyComponent prop={value} /> instead of React.createElement). Importantly, JSX is just syntactic sugar and requires a build step (transpilation with Babel or TypeScript) to convert to JS.
• Performance and Scheduling (React 18+): React 18 introduced a concurrent rendering capability and a new scheduling behavior. This includes features like automatic batching (grouping multiple state updates into a single render to avoid redundant re-renders) and transitions (via useTransition) for smoother UI updates. Concurrent rendering allows React to prepare updates without blocking the main thread, yielding to user interactions when needed. For developers, this means the UI can remain responsive even during large updates. React also added APIs like useDeferredValue (to defer updating less urgent parts of the UI) and expanded the <Suspense> mechanism to better handle loading states for code-split or data-fetching components. These improvements aim to make UIs feel fluid by scheduling rendering work more intelligently behind the scenes.
• Rich Ecosystem & Community: React is open-source (MIT license) and maintained by Meta with a large community. This ensures long-term support and abundant libraries, tools, and learning resources. Its widespread adoption (in web apps, design systems, etc.) is a strong vote of confidence.