Stack Overflow
Stack Overflow

Questions tagged [use-state]

useState related questions for reactjs hooks api.

Basic React Hook

useState

const [state, setState] = useState(initialState);

Returns a state value, and a function to update it.

Resources

useState hook reference

Common Questions/Issues

  • Why isn't React state update immediate?
  • How to access the latest value?

useState set method not reflecting change immediately

3329 questions
384
votes
22 answers

How to use `setState` callback on react hooks

React hooks introduces useState for setting component state. But how can I use hooks to replace the callback like below code: setState( { name: "Michael" }, () => console.log(this.state) ); I want to do something after the state is updated. I…
Joey Yi Zhao
  • 37,514
  • 71
  • 268
  • 523
39
votes
3 answers

How can I store and update multiple values in React useState?

I've a series of user data elements which I'm collecting inside a React component using hooks. const [mobile, setMobile] = useState(''); const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password,…
Melissa Stewart
  • 3,483
  • 11
  • 49
  • 88
36
votes
10 answers

getting error "TypeError: Cannot read properties of null (reading 'useState')" on useState usage react

So I'm trying to use useState in my nextjs app, but as soon as I add in the line of code to initialize useState it throws a popup error with the error message: TypeError: Cannot read properties of null (reading 'useState') Here is a simplified…
Brace Sproul
  • 593
  • 1
  • 5
  • 15
36
votes
1 answer

Lazy initial state - What it is and how to use it?

I am new to react Hooks. Am trying to make use of useState in my code. While I was using it I found a term "Lazy initial state" https://reactjs.org/docs/hooks-reference.html#lazy-initial-state const [state, setState] = useState(() => { const…
Peter
  • 1,069
  • 2
  • 13
  • 24
31
votes
2 answers

How To Solve The React Hook Closure Issue?

import React, { useState } from "react"; import ReactDOM from "react-dom"; function App() { const [count, setCount] = useState(0); function handleAlertClick() { return (setTimeout(() => { alert("You clicked on: " + count); },…
A2ub
  • 374
  • 1
  • 3
  • 9
24
votes
2 answers

Why my nextjs component is rendering twice?

This is a component that render data from firebase storage and make it listed. What the function has to do is set the videos extracted from firebase storage to the useState. That way I can call videos and map into a new component, which happens to…
Diesan Romero
  • 1,292
  • 4
  • 20
  • 45
22
votes
4 answers

How do I avoid unused setState functions? Can React useState be created without a setter?

I'm currently reducing / removing npm warnings on a React site. A large number of these warnings are caused by the setState function as seen below, being 'unused'. const [state, setState] = useState('some state'); Which of the following would be a…
Thomas Fox
  • 521
  • 2
  • 5
  • 16
19
votes
2 answers

Is there a react way to store a mutable class instance objects in state?

React state shouldn't be mutated directly. But, what if the state is an instance of a class that shall be mutable with its own methods. Is there another way than having to deep-clone and re-instantiate the object with new parameters? In General:…
elMeroMero
  • 752
  • 6
  • 18
18
votes
7 answers

How to update state with usestate in an array of objects?

I'm having some trouble with the React useState hook. I have a todolist with a checkbox button and I want to update the 'done' property to 'true' that has the same id as the id of the 'clicked' checkbox button. If I console.log my 'toggleDone'…
MFA86
  • 185
  • 1
  • 1
  • 9
18
votes
3 answers

UseState shows previous value always

This is a popular question among all the new react developers but somehow I'm not able to understand the logic behind available solutions. I'm trying to update the state variable using hooks and trying it read the updated value but always it returns…
vivek.p.n manu
  • 286
  • 1
  • 4
  • 19
17
votes
1 answer

How does useState() in React Hooks know which Component instance it is?

React Docs says: How does React associate Hook calls with components? React keeps track of the currently rendering component. Thanks to the Rules of Hooks, we know that Hooks are only called from React components (or custom Hooks — which are…
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
15
votes
2 answers

Typescript and React with File Upload (typing)

I just started with TypeScript, so please bear in mind. I am trying to implement a simple file upload in React/TS. In general, I don't think I understand how to initialize objects, like in useState, and handle the possibilities properly. For…
MattoMK
  • 609
  • 1
  • 8
  • 25
15
votes
2 answers

Why is my react component rendering twice on initial load?

I have a functional component called (First) function First() { const [count,setCount]=useState(0) console.log("component first rendering") // this logging is happening twice return (
first component …
user8989
  • 580
  • 2
  • 6
  • 21
14
votes
5 answers

how to Show or hide Navbar when scroll use react.js?

I used react.js Hooks with useState and useEffect, when I scroll-down and the screen comes down Header hides after 250 pixels. Now I want to know how to display Header using the react Hooks when I scroll up. const Navbar = () => { const [show,…
Saeed Ghezel Arsalan
  • 159
  • 1
  • 1
  • 6
13
votes
1 answer

React State Variables Not Updating in Function

I'm creating a chat app that works completely fine except for one issue: when I call a function that was passed to a child component, it uses the state variable's initial value, rather than its current value. I've included the code below and a…
Elliptica
  • 3,928
  • 3
  • 37
  • 68
1
2 3
…
99 100