React

What is React and what does it do?

React is a JavaScript library for describing an interface as a tree of components. A component receives data through props, may keep local state, and returns the interface that should exist for those values. This model replaces scattered manual DOM updates with an explicit relationship between data and presentation.

React is concerned with the view layer. It can render a small interactive control or form the interface foundation of a larger application. The surrounding choices, such as routing, data access, authentication, and deployment, remain separate responsibilities unless a framework supplies them.

How state becomes a screen update

A user event can request a state change. React then evaluates the affected components and commits the necessary changes to the rendered interface.

Event -> state update -> component render -> interface commit

Render logic should stay predictable: the same props and state should describe the same result. Side effects belong outside that calculation, and state should have one clear owner. This keeps loading, empty, success, and error states visible in the component tree.

A toggle with one source of truth

The same state value below controls both the accessible pressed state and the visible label:

import { useState } from 'react';

export function StatusToggle() {
  const [online, setOnline] = useState(false);

  return (
    <button
      aria-pressed={online}
      onClick={() => setOnline(value => !value)}
    >
      {online ? 'Online' : 'Offline'}
    </button>
  );
}

No second flag needs to be synchronized with the button text.

The boundary around React

React does not define a complete product architecture. Network requests, cache policy, URL structure, server rendering, authorization, and observability still need deliberate solutions. Component boundaries also carry a cost: splitting every small fragment into a component can make ownership harder to follow instead of easier.

React is most useful when an interface has meaningful state transitions, reusable visual units, or several states that must remain consistent. A static document may need little or no client-side React.