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

useState loading not updating before async

I have a function runValidation that loops through a bunch of numbers and does some calculations. It's might take a while, so I wanted to include an "isLoading" useState. So I made a simple const [isLoading, setIsLoading] = useState(false) When I…
Daniel Olsen
  • 1,020
  • 2
  • 15
  • 27
3
votes
1 answer

How to clear a material-ui search input using a button

Working on a tutorial atm that involves react material-ui tables that also has a search input textfield. What I am trying to add to it, is a button that will reset the table report but also clear the search input textfield. It is the clearing of the…
ArthurJ
  • 777
  • 1
  • 14
  • 39
3
votes
2 answers

useState value is one step behind in reactjs

I am working on a login/register page in react and I use useState hooks for check if the password is strong or not. and display user what should he do to make his password stronger. But I noticed that when user is typing in the password field…
pawan gogoi
  • 41
  • 1
  • 3
3
votes
1 answer

Custom hook's state does not update across all components?

import { useState } from 'react'; export default function usePrivacyMode() { const [isPrivacyOn, setIsPrivacyOn] = useState(false); return { isPrivacyOn, setIsPrivacyOn }; } This is my custom hook. I set the state in PrivacyIcons…
KRALQT
  • 41
  • 4
3
votes
1 answer

How can I convert a string to a number inside of a useState Hook?

I am trying to convert data from a string to a number before it is inputted so that I can perform mathematical calculations on the data later. I tried to use parseInt inside of my useState hook but I received the following error: ReferenceError:…
melly18
  • 87
  • 3
  • 11
3
votes
2 answers

Push a number in useState array

In a form having multiple checkbox, I want to store the values of the check box in an useState array after clicking submit. Also the user may check/uncheck a check box multiple times before submitting the form. What can be the approach/code?
Rk Kk
  • 35
  • 1
  • 5
3
votes
1 answer

React memorizes value in async callback

React unexpectedly keeps an old value of a variable produced by React.useState(...). I press the button [1] and then [2]. In 3000 ms I expect to see "null" in the alerting message, but still see "42". Wrapping handleDisplay into React.useCallback…
Maxim Zaytsev
  • 43
  • 1
  • 5
3
votes
1 answer

useState hook causes "too many rerenders" error when using it in react-native

I just started with React-native and I can't understand why I got error "too many rerenders". So I created app using npx react-native init command and than I changed App.js, now my App.js looks like that: const App = () => { const [numberOne,…
Stas Motorny
  • 141
  • 1
  • 8
3
votes
1 answer

useState not re-rendering component if it is called inside callback function

I have a component to upload a video and I am trying to show the progress bar. Here is my core code. const Upload = () => { const [percent, setPercent] = useState(0); console.log(percent); // This logs uploaded percentage every time progListener…
daniels
  • 47
  • 1
  • 7
3
votes
2 answers

React js : Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method

I'm trying to make gpa calculator that need letter grade and credit hours to calculate gpa. Letter grade help to find points for eg A+ means 4.00 or D means 1.00. The problem is that when I change my grade value more than once I get this error and…
Ali Qumail
  • 43
  • 1
  • 5
3
votes
2 answers

AsyncStorage not storing data and subsequently does not retrieve data

I am using expo and react-native I am trying to use AsyncStorage to save 3 values in persistent storage so I can get it from anywhere in the app, but asyncstorage is not saving or retrieving, I have rewritten the code several times and several…
Ruben Meiring
  • 333
  • 2
  • 21
3
votes
2 answers

Updating useState without inserting another object

This is the full code of the component, I am so tired that I can't think much on how to solve this problem import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; function CnContent(props) { const getCart =…
3
votes
1 answer

React hooks, Why is it automatically re rendered when the DB value changes?

First of all, I use Firebase to structure my DB. I saved my db value through useState like this way. const getFromFirestore = useCallback(() => { console.log("GET From Firestore"); webtoonSites.forEach((siteName) => { …
3
votes
2 answers

React component state wiped before component unmounted

If I return a function from useEffect I can be sure that that function will run when a component unmounts. But React seems to wipe the local state before it calls my unmounting function. Consider this: function Component () { const [setting,…
shennan
  • 10,798
  • 5
  • 44
  • 79
3
votes
1 answer

useState function is not working in functional component

I want to change a state (filterConsultantId) with a useState function (setFilterConsultantId) after I trigger a normal function (handleConsultantChange) and I expect the state value is changed when I use the state in another normal function…
Dika
  • 2,213
  • 4
  • 33
  • 49