bhylu.com

Advertisements

React State as a Snapshot

Predict what a handler sees rather than expecting a setter to mutate the variables already in scope.

How it works

Each render gives event handlers a snapshot of state. A setter schedules an update; it does not change that snapshot halfway through the handler. This example records the old count as a separate message while requesting the next count. The two outputs make the timing visible without alerts or artificial delays. Understanding this model helps explain stale closures, asynchronous callbacks and repeated updates later.

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.

Example

src/main.jsx

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

function App() {
  const [count, setCount] = useState(0);
  const [seen, setSeen] = useState('No click yet');
  function inspect() {
    setCount(count + 1);
    setSeen('Handler saw: ' + count);
  }
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={inspect}>Inspect</button>
      <output id="current">Current: {count}</output>
      <p id="seen">{seen}</p>
    </main>
  );
}

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

Expected result

After one click, Current is 1 and the handler message says it saw 0.

Both updates are requested by the same event, but the handler still closes over the earlier count. There is no need for an effect just to learn what the next number will be: calculate nextCount when it is part of the event’s decision. A delayed callback also retains values from the render that created it unless your design explicitly reads a current ref or supplies another mechanism.

For API contracts and version differences, use React’s official documentation.

Advertisements