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

Getting previous State of useState([{}]) (array of objects)

I am struggling to get the real previous state of my inputs. I think the real issue Which I have figured out while writing this is my use of const inputsCopy = [...inputs] always thinking that this creates a deep copy and i won't mutate the original…
J. Cutshall
  • 302
  • 3
  • 13
3
votes
1 answer

setIsOpen is not a function

I'm creating a modal in react, I want that when a card is clicked the modal comes up but I'm having an issue showing it. I'm using UseState to handle the opening and closing (toggle true or false), but when clicking on the card, I'm getting an error…
3
votes
2 answers

Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. React js

i am currently learning react, but i have this error Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. and this is the code const [Status, setStatus] = useState(false); if…
Zulfikar
  • 49
  • 6
3
votes
2 answers

Comprhension about useState (React)

Can you please explain me why this simple code doesn't work as expected ? There's a button called "Start the timer" that's directing to the "chrono" function. I thought that using setCount would update the count variable state but it stays at 0…
JSL
  • 59
  • 4
3
votes
1 answer

useEffect not firing after updating the component's state

I am making a simple e-commerce website but I've ran into an issue where useEffect() won't fire after making a state change. This code snippet I'll include is for the "shopping cart" of the website and uses localStorage to store all items in the…
G T
  • 31
  • 3
3
votes
3 answers

React-Typescript edit list

I am using React-TypeScript to create a list of employees, edit and delete them. However my edit button does not do anything on click. Any idea on how I can fix this problem? I have used the same code for the "Delete" function and works perfectly.…
3
votes
1 answer

react useState not re rendering

I have a pretty simple useEffect hook const [tagsWithData, setTagsWithData] = useState([]); useEffect(() => { .... const finalsTags = temp.map((item) => item.name); setTagsWithData(finalsTags); }, []); Inside of return, I have…
Deepa
  • 151
  • 1
  • 12
3
votes
1 answer

Should a function always be used for a setState that gets passed an array or object?

Wanting to improve my understanding of React in functional components I've seen some that pass a seState with a function when spreading an array or object. When I reference the docs I see: Unlike the setState method found in class components,…
DᴀʀᴛʜVᴀᴅᴇʀ
  • 7,681
  • 17
  • 73
  • 127
3
votes
1 answer

Advise about the reduction of the amount of React useState hooks

I am trying to build my very own first project that is relatively large, at least for my level of experience anyway. I am heavily relying on useContext in combination with useStates hooks to handle the logic between my different components, as time…
3
votes
1 answer

React setState array is appending the same item twice on second call onward

I'm building a simple twitter clone with React and I'm facing a weird behaviour when creating a new Tweet. Right now, how it works is that I locally store a tweets array using useState and I use setState to add the new tweet into the array.…
jmsandiegoo
  • 413
  • 4
  • 14
3
votes
1 answer

Initial values in useState not updated after re-render

Pretty sure I'm missing something fundamental about React. So here's the code: export function EditTagsModal({existingTags}) { console.log('existingTags', existingTags); const [selectedTags, setSelectedTags] = React.useState(existingTags); …
kyw
  • 6,685
  • 8
  • 47
  • 59
3
votes
2 answers

React: State is not up-to-date when I unmount component

In my job I have to make an http request when someone leaves the page. My idea was to do this request when the component of that page unmounts. If I understand it correctly this can be done by putting logic in the return function of useEffect. When…
tilly
  • 2,229
  • 9
  • 34
  • 64
3
votes
1 answer

Why does the state reset in functional react component when changing between pages using `react-router`

Why does the state reset in react component when changing between pages using react-router? As I understand it, you should be able to switch between routes (components) using react-router as long as you use the 'react' way of changing, ie.
Jac Frall
  • 403
  • 7
  • 15
3
votes
2 answers

Creating an Accordion in React Native with Collapsible

I created an accordion and I created some logic for it but when I look at my code it doesn't feel right. I don't know where to ask so I'm asking here. So I created an accordion component and Implemented it on my screen. What is specific about this…
3
votes
2 answers

Is it a common practice in React to keep the same value in state and ref?

My React app uses setTimeout() and setInterval(). Inside them, I need to access the state value. As we know, closures are bound to their context once created, so using state values in setTimeout() / setInterval() won't use the newest value. Let's…
Robo Robok
  • 21,132
  • 17
  • 68
  • 126