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
3
votes
1 answer

Implementation details of setStateVariable function in useState hook

We know that useState is a hook in FC that returns an array consists of two elements. The first one is a state variable and the second is a function to update the state variable. const initialStateVariableValue = 0; // any primitive value const…
Subrato Pattanaik
  • 5,331
  • 6
  • 21
  • 52
3
votes
4 answers

Clear value into input using useState or useRef (React)

I got hook: const [myName, setMyName] = useState(""); const myNameRef = useRef(); Then I have form:
addVist(e, user.id)}> setMyName(e.target.value)} />
4est
  • 3,010
  • 6
  • 41
  • 63
3
votes
1 answer

React Typescript storybook implement customized Input component with onChange callBack then setState value backTo Input

I am currently implementing a React Customized Input component with storybook. What I am hoping to achieve is this customized Input component will take few args, one of the args is onChangeInput, it'll be responsible to setState value for 'input…
sefirosu
  • 2,558
  • 7
  • 44
  • 69
3
votes
3 answers

Should I use separate useState for each property

I have written following code: function CreateModal({toggleCreatePorjectModal, fetchProjects}) { const [formObj, setFormObj] = useState({name: "", link: "", error: ""}) function validateLinkAndCreateProject() { …
Kiran
  • 2,147
  • 6
  • 18
  • 35
3
votes
1 answer

React - Removing item from array not rerendering list

I am having trouble understanding why this code is not working. It removes the item from the people array in the state but its not rerendering the list. import { render } from 'react-dom'; import axios from 'axios'; import ReactLoading from…
3
votes
0 answers

Do we still need to do shallow/deep copy with react hooks states?

I've a question regarding the useState hook since the docs say that it completely replaces the old state with the new one you provided. unlike this.setState in a class, updating a state variable always replaces it instead of merging it. Following…
Mohamed Wagih
  • 1,246
  • 6
  • 17
3
votes
2 answers

Running into a state error when attempting to change an input onChange

I when I pass state down from a parent component the setState keeps throwing an error stating that setEmail is not a function on event change. I was wondering if there is a simple fix to this. When I try typing in a string within the email input it…
brycent
  • 97
  • 2
  • 10
3
votes
1 answer

Method not getting correct useState value despite updating state in React

I am working on a site where I am trying to display paginated student information. For example I have 12 students I have pagination items 1-4 as I display 3 students at a time. I am running into a problem when I call my update pagination function.…
Galactic Ranger
  • 851
  • 3
  • 14
  • 30
3
votes
2 answers

UseState only shows on second click

I am updating state using React useState hook on click of a form submit button, the state is not updating until second click. Believe I need to use a useEffect but not sure how to implement with an onClick. const files = [ { id: 'foo' …
James
  • 281
  • 3
  • 9
3
votes
1 answer

Component holding on to old state?

I have a custom modal with custom buttons as props. const [selection,setSelection] = useState(null) const onSelect = (item) => { setSelection(item); Gui.PickOption({ message: 'choose an action', buttons:…
lord_drgical
  • 143
  • 2
  • 8
3
votes
1 answer

react hook useState in AgGridColumn onCellClicked function

Currently, I am using functional react components with react hook useState and an AgGridReact Component. I am displaying an AgGridReact and put a onCellClicked function on a AgGridColumn. So far everything is working. In the onCellClicked function I…
anvin
  • 450
  • 2
  • 8
  • 22
3
votes
1 answer

State adding number as string and not as integer

I'm trying to create a sort of expense manager and I'm having an issue where the numbers I submit gets added as a string and not as an int. i made sure that the default is set as an integer and not as a string. The "problematic" component is the…
NewbieAeg
  • 557
  • 3
  • 8
  • 15
3
votes
1 answer

Reack hook useState (initializer function) called twice, even without altering the data at all?

Here in this example I simply call useState with an initializer function: import React, { useState } from "react"; import "./styles.css"; export default function App() { const [data, setData] = useState(() => { console.log('Getting initial…
gremo
  • 47,186
  • 75
  • 257
  • 421
3
votes
2 answers

React useState does not update value

I am a bit confused as to why this component does not work as expected: function Counter() { const [count, setCount] = useState(0); useEffect(() => { const id = setInterval(() => { setCount(count + 1); // This effect depends on the…
paralaks
  • 183
  • 2
  • 7
3
votes
1 answer

How to stop useEffect from reloading my page every time?

For some reason my whole page reloads every time it updates the state after it gets it from the database. The page flickers and I end up at the top of the page. Why is this? I update the entire state in other functions like sort(), that works…
Joniverse
  • 45
  • 1
  • 6