To make a React component remember a changing value and show it on screen, store that value with React’s useState Hook and call its setter when an event occurs. Vite provides the development project and server; React state is what tells the component to render again.
What useState does in a React component
State is component-specific memory: it holds a value across renders, such as a counter, text input, selected tab, or whether a panel is open. Import useState from React, then call it at the top level of a function component or custom Hook. It returns two values: the current state and a setter function. See React’s State: A Component’s Memory.
As an Amazon Associate I earn from qualifying purchases.
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}useState(0) sets the initial count to zero. The setter, setCount, requests an update. React renders the component again with the updated state, and the returned JSX displays the new count.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Why a regular variable does not update the UI
A variable such as let count = 0 inside a component is recreated when that component renders. Changing it does not preserve the value for a later render or tell React to render again. State supplies both behaviors: it retains the value between renders and its setter requests a render so JSX can reflect the update.
#1 Best Overall
| Behavior | Regular local variable | React state |
|---|---|---|
| Persists between renders | No; the component runs again and creates the variable again. | Yes; React retains the state for that component instance. |
| Changing the value requests a render | No. | Yes; call the setter. |
| Can update the JSX on screen | Not by changing the variable alone. | Yes; React renders again using the updated state. |
What happens when you call a state setter
Calling setCount(count + 1) does not immediately change count in the event handler that is already running. That handler sees the state snapshot from the render that created it. The setter requests a later render; code in that current handler continues to see its original snapshot. React explains this in State as a Snapshot.
Rules and common mistakes
- Call Hooks at the top level. Do not call
useStateinside a condition, loop, event handler, or nested function. Call it at the top level of a component or custom Hook. - Do not mutate object state. When updating an object in state, create a new object rather than changing the existing object and passing the same object back. See React’s Updating Objects in State.
- Do not assume state is shared automatically. Each component instance has its own state. If multiple components need to coordinate, move the shared state to their closest common parent and pass the needed values down. React describes this approach in Sharing State Between Components.
How Vite fits into the setup
Vite is development tooling: it serves your project while you build it. React provides useState and controls the component update when you call its setter. Vite does not manage React state. Its official Getting Started guide covers the Vite CLI, project setup, and local development server; its manual setup example serves the project at http://localhost:5173. Follow the current guide for the setup path you choose rather than assuming a particular template or command.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
