React Render Purity

How it works

A render may be started, repeated or discarded. It must not mutate shared data, append records to a module-level array or send a request. Pure rendering makes those repeated attempts harmless. This example derives a total from an input array without changing it. StrictMode helps reveal some mistakes during development, but passing its checks does not prove that an entire app is pure or free of side effects.

Run the code

Use a separate empty lab folder with Node 22.12+ in the 22 series. Save the files below using their displayed paths; browsers may download only the basename, so create src, public or tests folders as listed. The pinned project uses React and React DOM 19.3.1 with Vite 7.3.1. Run npm install, then npm run dev and open the local address Vite prints. React examples do not run in Bhylu’s current playground.

No Apache, MySQL or change to Bhylu’s server configuration is needed. These are local teaching projects, not a publishing package. Keep generated dependencies and lockfiles in your own lab. Review the project setup.

• package.json
• index.html
• src/main.jsx
• src/style.css
• vite.config.mjs

Example

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './style.css';

const loans = [
  { id: 'a', days: 2 },
  { id: 'b', days: 3 },
];
function Summary({ records }) {
  const total = records.reduce((sum, row) => sum + row.days, 0);
  return <output>Total loan days: {total}</output>;
}
function App() {
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <Summary records={loans} />
      <p>Record count: {loans.length}</p>
    </main>
  );
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Expected result

The total is five and the original array still contains two records.

reduce creates a number from the records. It does not add a summary row to the array. Local temporary mutation of a newly created value can be fine; the important question is whether anything from outside this render is changed. Repeated rendering should not charge a customer twice or increment a shared counter. Events and effects have different responsibilities from a render.