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
5
votes
3 answers

Consequences of using computed variables vs useState/useEffect

If I have a variable whose value can be fully derived based on the value of another property, is there any consequence/pitfall to initializing a computed variable vs using a combination of useState/useEffect to track the variable? Let me illustrate…
jrnxf
  • 744
  • 8
  • 22
5
votes
2 answers

Best practice for React useState with objects?

Unlike the state from classes, you are not limited to a single object. With useState, you can create separate values for each case like this: const [name, setName] = useState('John'); const [email, setEmail] = useState('john@example.com'); const…
filoscoder
  • 495
  • 1
  • 4
  • 10
5
votes
1 answer

React useState not updating on first click

Why doesn't the state change on first click? const [building, setBuilding] = useState(0);
lache
  • 608
  • 2
  • 12
  • 29
5
votes
1 answer

access useState variable in cleanup/return method of useEffect

I have a field like so const SimpleReactComponent = (props) => { const [title, setTitle] = useState('DEFAULT') useEffect(() => { return () => { // unmount console.log(`[${title}] while unmounting`) } }, []) return…
Anand Rockzz
  • 6,072
  • 5
  • 64
  • 71
5
votes
3 answers

Convert class component to functional component in React

I'm learning React hooks so in order to do that I'm trying to convert a class component to a functional component but I still get some errors. Here is the original working component written as a class: import React, { Component } from…
dadsa
  • 177
  • 1
  • 13
5
votes
1 answer

React does useState by default call function without parenthesis

I have a function named getAllEmployees which I export from another file. const getAllEmployees = () => { return [1,2,3,4,5,6,7,8,9] } export { getAllEmployees } now I use React.useState(getAllEmployees). this gives me the result, when I call…
A.S.Abir
  • 93
  • 7
5
votes
4 answers

How to use useState hook in React with typescript correctly?

I am trying to make a login form in react with typescript. But setEmail method is not accepting value. It says Argument of type 'string' is not assignable to parameter of type 'SetStateAction'. What should I do to solve it?
Budhathoki1998
  • 115
  • 1
  • 2
  • 7
5
votes
1 answer

how to use fresh state inside the useeffect, but execute cleanup on unmount only

AFAIK, in the React Function Component, one has to use useEffect for componentWillUnmount functionality like below: useEffect(()=>{ return console.log("component unmounting"); },[]) I am making a form page, and want to submit the progress when…
Hyunwoong Kang
  • 530
  • 2
  • 9
5
votes
2 answers

How to reset React hook state with setTimeout in useEffect

I have a simple component that copies a link to the clipboard, and would like to swap the link icon with a checkmark. I have the logic setup to do so, but having an issue getting the state reset after 3 seconds to reset the button back to the link…
Matt
  • 1,561
  • 5
  • 26
  • 61
5
votes
3 answers

How do I hide and show components with useState or conditional rendering in React?

My initial goal to solve: I have 4 components lined up next to each other. I want to be able to toggle/onClick one of the components and have the other 3 components disappear. Then re-toggling that same component to have the other components…
Patrik Kozak
  • 55
  • 6
5
votes
1 answer

How to setState with an Array and object in Typescript?

This is how I declare a state const [input, setInput] = React.useState('') const [goals, setGoals] = React.useState([]) and this is my error code: const addHandler = () => { setGoals((curGoals) => [...curGoals, { key:…
barungerti441
  • 113
  • 1
  • 2
  • 5
5
votes
1 answer

React UseState Boolean Array Modify One Element

I have a boolean array in useState const [checkBoxState, setcheckBoxState] = useState([true,true,true,true,true,......] I need a function that toggle only specific index value A function like this const HanldeCheck = (index) => { …
Abdullah Mufti
  • 91
  • 1
  • 8
5
votes
3 answers

Use useState value in useEffect without making the state update useEffect

I'm working on a function that manages a string array based on object keys. Let's say it looks like this: import React, { useState, useEffect } from "react"; import FieldContext from "../contexts/FieldContext"; import io from…
Thimma
  • 1,343
  • 7
  • 33
5
votes
2 answers

Conditionally setting className based on a state variable in a React functional component

I'm trying to change the appearance of a button based on if that element exists in state. It is a multiple selection selection. So setAnswer is called, which calls addAnswer. I then want to set the className based on whether the element is in state…
Jerry Garcia
  • 63
  • 1
  • 5
5
votes
2 answers

Why doesn't the React useState hook work in a for loop?

I'm curious about why setting state in a for loop doesn't work as expected. This is my code using hooks. const [count, setCount] = useState(0); const onButtonPress = () => { for(let i=0; i<100; i++){ setCount(i); } } …
Rohan Bhatia
  • 61
  • 1
  • 3
1 2 3
…
99 100