React
react.dev › reference › react › useState
useState – React
It should be pure, should take no arguments, and should return a value of any type. React will call your initializer function when initializing the component, and store its return value as the initial state. See an example below. useState returns an array with exactly two values:
React
react.dev › learn › state-a-components-memory
State: A Component's Memory – React
Typing into the form should update the input field, clicking “next” on an image carousel should change which image is displayed, clicking “buy” should put a product in the shopping cart. Components need to “remember” things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called state. How to add a state variable with the useState Hook
Can you explain react hooks and state to an idiot?
From the question you're asking, it's clear you're in a little over your head here. A lot has happened with react in the last couple years, including the introduction of hooks. They're great, we all love to use them in our functional components, however I'd take a moment to read the react documentation on how state works in both functional and class components just to get a basic understanding of how stateful components work. Understanding how state works in class components, which used to be the only kind of components, (before the introduction of hooks,) will make much more sense if you're new to react. It's really easy to see and understand the benefit of hooks/functional components once you understand the core concepts of state mgmt etc. Writing a class component or two will give you a clear idea of what hooks are doing "under the hood" and why you need a special function to update state etc. There's actually a modern, high level JavaScript feature called array destructuring behind the simple: const [state, setState] = useState(initialState) this basically equates to: const state = initialState const setState = helper function from react In short RTFM but ultimately I'd suggest writing one or two class components without hooks to get a sense of what state does for a component and how components work in the react virtual document object model(DOM). EDITs: way too many you probably won't read/need. More on reddit.com
Why do we use "const" for useState instead of "let"?
The "remembering" happens outside of your function. When you call setState(), React maintain's it's own internal store where they keep track of values, and updates it there. It then it re-renders by calling App(), running your entire function again So when you are doing useState(), you are basically just asking react "Give me the current value of the [first] state variable used in the App component" and "Give me a function that lets me change it". So the value "count" here isn't the actual count that you can modify, but just the current value of what is in React's store when App() was ran. A tiny way to visualize it is as this: const getCount = () => 1; function App() { const count = getCount(); } More on reddit.com
What is useState() and How to use ?
Hey Guys! Are you learning React at the moment ? This video is perfect for you! You will see how useState hook works inside a react functional… More on reddit.com
Is it okay to use many useState and useEffect?
Yes, but... Could the component be split into smaller single-purpose components that encapsulate their own logic? Are you deriving state? Do you have a chain of useEffect dependencies that could be collapsed into a single operation? Are you using useState where you could just set a variable value (or useMemo if it's a complex operation). Could you extract bundles of related logic into custom hooks or vanilla functions to clean up your component and make your code more reusable? More on reddit.com
Videos
15:45
Learn useState In 15 Minutes - React Hooks Explained - YouTube
Learn React Hooks: useState - Simply Explained! - YouTube
16:33
React useState() hook introduction 🎣 - YouTube
10:37
Learn useState in 10 Minutes | Beginners React Hooks Tutorial - ...
React's useState Hook Explained (2 min) - YouTube
useState in depth | React JS Advanced Concepts - YouTube
W3Schools
w3schools.com › react › react_usestate.asp
React useState Hook
The React useState Hook allows us to track state in a function component.
Broadwayinfosys
ftp.broadwayinfosys.com › blog › ftp.broadwayinfosys.com › usestate-in-react-what-is-it-for-1767646675
UseState In React: What Is It For?
January 6, 2026 - We cannot provide a description for this page right now
Hygraph
hygraph.com › blog › usestate-react
useState() Hook in React - A Complete Guide | Hygraph
January 21, 2026 - In this guide, we have learned what state is and why it is important, we learned about the useState() hook from React which helps us to manage a component’s memory. We also learned about the lifecycle of a state variable and how the new state value is enforced after a component’s re-render.
MUI
mui.com › material-ui › react-snackbar
React Snackbar component - Material UI
export default function MyComponent() { const [open, setOpen] = React.useState(true); return ( <React.Fragment> <Snackbar open={open} onClose={(event, reason) => { // `reason === 'escapeKeyDown'` if `Escape` was pressed setOpen(false); // call `event.preventDefault` to only close one Snackbar at a time.
W3Schools
w3schools.com › react › react_hooks.asp
React Hooks
Hooks are functions that let you "hook into" React state and lifecycle features from functional components. Here is an example of a Hook. Don't worry if it doesn't make sense. We will go into more detail in the next section. import { useState } from 'react'; import { createRoot } from 'react-dom/client'; function FavoriteColor() { const [color, setColor] = useState("red"); return ( <> <h1>My favorite color is {color}!</h1> <button type="button" onClick={() => setColor("blue")} >Blue</button> <button type="button" onClick={() => setColor("red")} >Red</button> <button type="button" onClick={() => setColor("pink")} >Pink</button> <button type="button" onClick={() => setColor("green")} >Green</button> </> ); } createRoot(document.getElementById('root')).render( <FavoriteColor /> );
CoinsBench
coinsbench.com › the-only-react-hooks-guide-youll-actually-finish-reading-9d6c4ffd3fc6
The Only React Hooks Guide You’ll Actually Finish Reading. | by Bethel Nnadi | Mar, 2026 | CoinsBench
2 weeks ago - When the user clicks it, the icon should fill and the count should go up. But here’s the challenge: a regular JavaScript variable inside a function resets every time the function runs. And in React, the function runs every time something changes. How do you remember anything? That’s exactly what useState was born to solve.
React
legacy.reactjs.org › docs › hooks-state.html
Using the State Hook – React
This is a way to “preserve” some values between the function calls — useState is a new way to use the exact same capabilities that this.state provides in a class. Normally, variables “disappear” when the function exits but state variables ...
React
react.dev › reference › react › useTransition
useTransition – React
import { Suspense, useState, useTransition } from 'react'; import IndexPage from './IndexPage.js'; import ArtistPage from './ArtistPage.js'; import Layout from './Layout.js'; export default function App() { return ( <Suspense fallback={<BigSpinner />}> <Router /> </Suspense> ); } function Router() { const [page, setPage] = useState('/'); const [isPending, startTransition] = useTransition(); function navigate(url) { startTransition(() => { setPage(url); }); } let content; if (page === '/') { content = ( <IndexPage navigate={navigate} /> ); } else if (page === '/the-beatles') { content = ( <ArtistPage artist={{ id: 'the-beatles', name: 'The Beatles', }} /> ); } return ( <Layout isPending={isPending}> {content} </Layout> ); } function BigSpinner() { return <h2>🌀 Loading...</h2>; }
shadcn/ui
ui.shadcn.com › docs › components › radix › carousel
Carousel - shadcn/ui
Copyimport { type CarouselApi } from "@/components/ui/carousel" export function Example() { const [api, setApi] = React.useState<CarouselApi>() const [current, setCurrent] = React.useState(0) const [count, setCount] = React.useState(0) React.useEffect(() => { if (!api) { return } setCount(api.scrollSnapList().length) setCurrent(api.selectedScrollSnap() + 1) api.on("select", () => { setCurrent(api.selectedScrollSnap() + 1) }) }, [api]) return ( <Carousel setApi={setApi}> <CarouselContent> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> <CarouselItem>...</CarouselItem> </CarouselContent> </Carousel> ) } You can listen to events using the api instance from setApi.
Poimandres
r3f.docs.pmnd.rs
React Three Fiber: Introduction
Index of documentation for pmndrs/* libraries
OpenReplay
blog.openreplay.com › a-guide-to-the-react-usestate-hook
A guide to the React useState hook
January 25, 2021 - When it is invoked inside a function component, it declares a piece of state which React keeps track of under the hood for subsequent re-renders of the component. The useState hook is a standard hook that ships with React and it is declared as a named export of the React module...
W3Schools
w3schools.com › react › react_useeffect.asp
React useEffect
The useEffect Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. useEffect accepts two arguments.