bhylu.com

Advertisements

React useState

Store a changing count and derive its visible explanation during rendering.

How it works

useState returns the current value and a setter. Calling the setter requests another render with the next state. A component’s local variables are recalculated, while its state survives as long as React preserves that component identity. Here the count represents locally inspected items, not a server inventory. The label is derived from the count instead of storing a second string that could fall out of sync.

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);
  return (
    <main>
      <h1>Neighbourhood lending desk</h1>
      <button onClick={() => setCount((value) => value + 1)}>Inspect one item</button>
      <output>Inspected locally: {count}</output>
      <p>{count === 0 ? 'Start with the first item.' : 'Keep notes for any damage.'}</p>
    </main>
  );
}

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

Expected result

Each click increases the count and the first-click advice changes automatically.

The functional updater expresses “one more than the latest queued value”. The state begins at zero after a fresh page load. It is not stored permanently or shared with another tab. Keep state near the component that owns the interaction; later lifting and context lessons address deliberate sharing. Store the count because the user changes it, but calculate the sentence from it.

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

Advertisements