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
4
votes
2 answers

Why is useEffect not being triggered?

I have a functional component that is supposed to be a running clock: import React,{useState,useEffect} from 'react'; import 'materialize-css/dist/css/materialize.min.css'; import { parseTime } from '../../Utils/utils' const MainClock = (props) =>…
4
votes
3 answers

Infinite Loop when using setState for array

I wanted to store 4 "hi" in an array. Instead of: strArr.push('hi'); strArr.push('hi'); strArr.push('hi'); strArr.push('hi'); I did this: for(let i = 0; i<4; i++){ setStrArr([...strArr, "hi"]) } However, I get this error: Error: Too many…
jason1234
  • 201
  • 5
  • 14
4
votes
2 answers

React Native | useState Async-Await

I have to update the state and use it in the function. It doesn't happen because I can't keep it waiting in the current system. It takes previous data and runs it. How can I hold it? For example, the last value of the page is 1 when 3. Click is…
aliosmankepir
  • 139
  • 10
4
votes
1 answer

How can I update multiple states at a time with useState hook?

In functional components, we use useState as opposed to this.setState for classComponents. But as far as I know, you can only set one state at a time with useState, while setState lets you set multiple states at a time, (e.g. this.setState({a1:…
4
votes
0 answers

Async useState leading to undefined element down the hierarchy

Setup/Scenario I am using twitter api to fetch data and rendering it in twitter card using react-native-socials. The tweet data ( JSON ) is stored and served through my backend and rendered in the app. I am using a Flatlist to render this…
temporarya
  • 715
  • 1
  • 7
  • 16
4
votes
2 answers

useState setter not updating state when called in useEffect

Pretty much what it says on the title. When I console.log(repos) it returns an empty array. Why is the repos state not updating? import React, { useEffect, useState } from "react"; import axios from "axios"; export default () => { const [repos,…
Eddie Lam
  • 579
  • 1
  • 5
  • 22
4
votes
1 answer

setInterval updating state in React but not recognizing when time is 0

I am practicing React useState hooks to make a quiz timer that resets every ten seconds. What I have now is updating the state each second, and the p tag renders accordingly. But when I console.log(seconds) it shows 10 every time, and so the…
butthash3030
  • 173
  • 1
  • 10
4
votes
1 answer

stale state inside socket callback

I was trying to make socket connection using React hooks. I am getting a stale value when trying to access a state variable inside socket callback function. users variable inside socket callback is not having the latest value. Using useRef works but…
clickonce
  • 93
  • 2
  • 5
4
votes
3 answers

React setting state in useState hook

I have problem with updating my state using useState hook. So in my "App" component, I declare my array of objects state: const [panelSettings, setPanelSettings] = useState([ { title: 'Background', active: true, options: [], updateDaily:…
Adam
  • 171
  • 1
  • 8
4
votes
1 answer

React - useState - update state: value vs function

I was wondering if there is any difference between passing a value and passing a function to update state in a functional component when referencing a previous state, as in below: import React, { useState } from "react"; export default function…
Wasteland
  • 4,889
  • 14
  • 45
  • 91
4
votes
5 answers

React usestate not updating on first Click Or on First time

Please, See this - https://codesandbox.io/s/morning-grass-z8qrq https://codesandbox.io/s/blue-flower-wl92u ** the second click, third, fourth, fifth click - menuOpen is true, then again click false - behaves as expected** let [menuOpen,…
4
votes
1 answer

React useState value in Context API always use initial value instead of updated value

I'm using Context API to store global value like userId to share between components across entire application. Here's what the context.js looks like: import React, { useState } from 'react'; const AppContext = React.createContext({ date: new…
DANKEST
  • 41
  • 1
  • 3
4
votes
1 answer

Cannot access updated state or props inside onPanResponderMove

What am I Trying to do: To change the state in response to user's up/down swipe. Environment: React native 0.61.5 I have the component as follows. import React, { useRef, useState } from 'react'; import { View, PanResponder } from…
varun
  • 55
  • 5
4
votes
1 answer

Getting async data in a react material table component

I'm building a small react app using firebase for both hosting and storing data, I am using a Material-Table for showing the data. The problem is i get this error when I'm trying to load the data into the table: Error: Objects are not valid as a…
4
votes
1 answer

React Custom Hook set function returned is not a function

So, I built a custom hook to fetch data from an api. Here is the code: export const useLambdaApi = () => { const [data, setData] = useState() const [isLoading, setIsLoading] = useState(false) useEffect(() => { const fetchData = async ()…
Danf
  • 1,409
  • 2
  • 21
  • 39