text 10 min

React Architecture

React is often described as a UI library, but it is easier to use well when you understand the pieces inside it.

At a high level, React separates three concerns:

  • describing UI with components
  • deciding what changed
  • applying those changes to the host environment

The host environment is usually the browser DOM, but React can also target native apps, terminal UIs, PDFs, and other render targets.

The Main Pieces

React applications are built from components. Components return React elements, which are plain objects describing what should appear on the screen.

jsx
function ProfileCard({ user }) {
  return (
    <article>
      <img src={user.avatarUrl} alt="" />
      <h2>{user.name}</h2>
    </article>
  );
}

This function does not directly create DOM nodes. It returns a description.

React then uses its internal renderer to turn that description into host output.

For the browser, the important packages are:

  • react: component APIs such as useState, useEffect, and createElement
  • react-dom: browser-specific rendering and DOM integration
  • the reconciler: internal logic that compares one UI tree to the next
  • the scheduler: internal logic that decides when work should run

Element Tree vs Component Tree vs DOM Tree

These are related but not identical.

text
Component tree:
App
  Dashboard
    UserList
      UserRow

Element tree:
{ type: Dashboard, props: ... }
{ type: "ul", props: ... }
{ type: "li", props: ... }

DOM tree:
<main>
  <ul>
    <li>...</li>
  </ul>
</main>

Components are your functions or classes.

Elements are lightweight descriptions produced by components.

DOM nodes are browser objects created or updated during commit.

Declarative UI

In imperative UI code, you tell the browser exactly what to change.

js
button.disabled = true;
button.textContent = "Saving...";

In React, you describe the UI for the current state.

jsx
function SaveButton({ isSaving }) {
  return <button disabled={isSaving}>{isSaving ? "Saving..." : "Save"}</button>;
}

React's job is to make the host environment match that description.

The Update Loop

Most React work follows this loop:

text
state/props/context changes
        |
        v
React renders components
        |
        v
React reconciles old and new trees
        |
        v
React commits host changes
        |
        v
browser paints updated UI

Rendering is about calculating what UI should look like.

Committing is about applying changes.

Keeping those separate is one reason React can prepare work before touching the DOM.

Components Must Be Pure During Render

A component should behave like a pure function of props, state, and context.

jsx
function Price({ amount }) {
  return <span>${amount.toFixed(2)}</span>;
}

It should not modify external state during render.

jsx
let renderCount = 0;

function BadCounter() {
  renderCount += 1; // avoid side effects during render
  return <p>Rendered {renderCount} times</p>;
}

React may render more than once, pause rendering, throw away work, or retry work. Side effects during render make those behaviors visible as bugs.

Where Side Effects Belong

Side effects belong in event handlers or effects.

jsx
function SearchBox() {
  const [query, setQuery] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    console.log("Search for", query);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={query} onChange={(event) => setQuery(event.target.value)} />
    </form>
  );
}

Event handlers run because the user did something.

Effects run after React has committed a render.

React Is Not the Browser

React does not replace browser fundamentals.

It still depends on:

  • HTML semantics
  • CSS layout and paint
  • JavaScript execution
  • network behavior
  • accessibility rules

React can help structure UI updates, but it cannot make expensive DOM, layout, or network work free.

Common Mistakes

  • Thinking JSX creates DOM nodes immediately.
  • Mutating values during render.
  • Treating every re-render as a DOM update.
  • Using effects for calculations that could happen during render.
  • Assuming React controls CSS layout performance.

Tricky Question

If a component function runs, did React definitely update the DOM?

No. React may render a component and decide that no host changes are needed. It may also prepare work and later discard it in concurrent rendering.

Quiz

Which statement best describes a React element?

Practical Challenge

Take a small component in one of your projects and identify:

  1. the component functions
  2. the elements they return
  3. the DOM nodes that eventually appear
  4. any side effects that run during render

Move render-time side effects into an event handler or an effect.

Recap

React components describe UI. React renders those descriptions, reconciles them against previous work, and commits only the necessary host changes.

The most important rule is that rendering should stay pure. Once you understand that, Fiber, concurrent rendering, and Strict Mode become much less mysterious.

← Applied Knowledge Check The Fiber Reconciler →