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

Why does my create-react-app console.log twice?

I'm just making a simple recipe fetching app using the create-react-app setup, but when I tried logging the response it logged it twice. I went backwards and deleted code until it stopped happening and for whatever reason it starts when I use the…
pshaw20
  • 103
  • 2
  • 7
5
votes
1 answer

How to initialise the set function of useState for TypeScript in a createContext?

I have a Provider that provides a state variable and its corresponding setter through two contexts. const BookedBatchContext = createContext({}) const SetBookedBatchContext = createContext(null) const initialState = { id: null } The Provider…
AlbertMunichMar
  • 1,680
  • 5
  • 25
  • 49
5
votes
1 answer

Using useEffect() hook to test a function in Jest

I'm learning Jest basically, I have to write a test case for the useEffect() hook which renders based on a flag[counter], and which internally checks if a localStorage value is present for a field. function sample(props) { const counter = props; …
MK6
  • 67
  • 1
  • 2
  • 7
4
votes
0 answers

React Component - Cannot read properties of null (reading 'useState')

I am building a little local dev/testing/documentation environment for some components which are used across different projects and so want to create them as individual npm packages. Everything was working perfectly until I tried to use useState()…
willptswan
  • 61
  • 1
  • 4
4
votes
3 answers

When should I use useEffect hook instead of event listeners?

Should useEffect hook be used when it can be simplified using an event listener? For example, in the below snippet code I use event listener to change some state and later useEffect hook to react to that state change and do some other thing import {…
Angel
  • 1,959
  • 18
  • 37
4
votes
1 answer

React, can't access updated value of state variable inside function passed to setInterval() in useEffect()

I am building a simple clock app with React. Currently the countDown() function works, but I would like the user to be able to stop/start the clock by pressing a button. I have a state boolean called paused that is inverted when the user clicks a…
Ryan Schafer
  • 87
  • 7
4
votes
2 answers

How to handle simultaneous React state updates with socket.io

Given the following React functional component: const DataLog: FC = (props) => { const [events, setEvents] = useState([]); const pushEvent = (event: string) => { const updatedEvents = [...events]; updatedEvents.push(event); …
bapin93
  • 162
  • 10
4
votes
2 answers

Is initial state based on props always bad in React?

It's a common React knowledge that having state initialized by props is bad if we don't make them in sync. This is considered fine: import { useState, useEffect } from 'react'; export default function MyInput({ initialValue }) { const [value,…
Robo Robok
  • 21,132
  • 17
  • 68
  • 126
4
votes
3 answers

How to style a component based on state in Styled Components?

I am trying to change the input background based on the useState hook in Styled Components in React. Here is my code: const [searchActive, setSearchActive] = useState(true);
Myrat
  • 347
  • 2
  • 4
  • 16
4
votes
2 answers

multiple dropdown state and handling outside click in React

I have a parent component that holds multiple Dropdown child components. The state is managed within the parent component to show only one dropdown at a time. I currently have part of it working but am having some trouble wrapping my head around the…
ewcoder
  • 242
  • 3
  • 14
4
votes
1 answer

TypeError: (0 , Rt.useState) is not a function

Before marking as duplicate, I've searched a lot and there was no answer. I'm making a react project. When on development environment, everything works just fine. Then when I build react, there is this error in the browser: TypeError: (0 ,…
Farhad Rad
  • 563
  • 2
  • 15
4
votes
1 answer

How to conditionally set generic type of useState, or remove type `undefined` from state if an initial value is set in custom hook?

I have a custom hook to help with async queries to an API. The hook works similar to a common useState statement in that you can set an initial value or leave it undefined. In the case of the built-in useState statement, the type of the state is no…
Nicola Mössner
  • 55
  • 6
4
votes
2 answers

Component props not updating on state change

I'm having a component in React. It's prop group should update when the state cloneMode change. For this I'm using the following code: Structure: const DraggableElement = ({ list, setList, cloneMode }) => { return (
Ajit Kumar
  • 367
  • 1
  • 10
  • 35
4
votes
1 answer

React prevent re-render by using functional variant of useState

I am trying to understand the exact difference in terms of how the re-render of function component is caused in one case using plain setState V/s other case which uses functional state update The relevant code snippet is as below Case 1 : Causes…
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
4
votes
1 answer

How to re-render the result of a custom hook when data loads

I am trying to render the number of items resulting from a custom hook. This custom takes some time to fetch the data from a database and returns a count (ie: any integer greater or equal to zero). My current setup is to call the custom hook and…
Tyler Morales
  • 1,440
  • 2
  • 19
  • 56
1 2 3
…
99 100