Questions tagged [react-state-management]

637 questions
83
votes
10 answers

How to pass state back to parent in React?

I have a form that has a submit button. That form calls a function onclick that sets the state of something from false to true. I then want to pass this state back to the parent so that if it is true it renders componentA but if it is false it…
The worm
  • 5,580
  • 14
  • 36
  • 49
26
votes
2 answers

Managing user's global state on next.js application

I am coming from the world of SPA's and REST/GraphQl API's. Now I am building personal project with Next.js library for SSR(Server Side Rendered) React App. Since I used Redux in all of my single page Apps, I'm now wondering how should I manage user…
22
votes
1 answer

What are the conceptual differences between Zustand and Recoil performance

I've been looking into Zustand and Recoil -- two state management libraries that are relatively new. Recoil is heavily advertised as being "very performant" for React apps with deeply-nested structures. However, I don't see how (or how exactly) it…
YSK
  • 528
  • 4
  • 7
22
votes
3 answers

React.js State not updating in Event Listener in useEffect Hook

So, What I'm trying to do is add an event listener to a button that when pressed takes the value of a state and console log it. But the logged value never updates even after the multiple setState calls. useEffect(() => { const seamCarve =…
Akash
  • 331
  • 1
  • 2
  • 6
13
votes
3 answers

How to reduce react context hell?

I have inherited a codebase where the previous owner has made extensive use of React.Context. This has resulted in what might be described as "context hell"
spinners
  • 2,449
  • 3
  • 23
  • 34
13
votes
2 answers

Passing setState to child component using React hooks

I'm curious if passing setState as a prop to a child (dumb component) is violating any "best practices" or will affect optimization. Here is an example where I have the parent container passing state and setState to two child components, where the…
13
votes
6 answers

React Hooks: skip re-render on multiple consecutive setState calls

Suppose I have the following code: (which is too verbose) function usePolicyFormRequirements(policy) { const [addresses, setAddresses] = React.useState([]); const [pools, setPools] = React.useState([]); const [schedules, setSchedules] =…
11
votes
5 answers

How to set zustand state in a class component

I am working on a site that has a piece a global state stored in a file using zustand. I need to be able to set that state in a class component. I am able to set the state in a functional component using hooks but I'm wondering if there is a way to…
whoMe
  • 227
  • 2
  • 13
11
votes
1 answer

Persist data between two pages with Next.js

I would like to refactor my Next.js webapp to have different pages handle different screens. Currently, I have this component holding several states to know in which screen I'm in. In the jsx section, I'm using {value && ... } to render the right…
Binajmen
  • 486
  • 2
  • 6
  • 18
10
votes
1 answer

What's the difference between useState and useImmer?

I have seen some React applications utilize useImmer as a hook instead of useState. I am not understanding what useImmer offers that useState does not. What is an advantage of using useImmer over using the official useState?
randombits
  • 47,058
  • 76
  • 251
  • 433
10
votes
3 answers

How to ensure a constant inside a component is only calculated once on start in React (Native) with hooks?

I am currently creating a React Native app and still am unsure about how to best handle states for my use case. I use react-native-svg to create a rather complex figure in the app, which is stored in a component, stays constant and is retrieved in a…
9
votes
2 answers

What is best approach for state management in server side rendering like next.js?

So working on a large scale application where I need to develop a front end part. And we would like it to be SSR for SEO purposes, But when it comes to state management we have redux for that so how we are going to manage it and what should be the…
7
votes
4 answers

How to manage complex list of items in react?

I have a faceted search component that I am building. I am having trouble figuring out how and where to handle state. Solution #1 A parent component manages state - uses a reducer to manage all components and pass state down Cons: child components…
Jeff
  • 2,293
  • 4
  • 26
  • 43
7
votes
2 answers

How to compare values from react redux state in hooks

I have recently written a table component using hooks , and every time page loads there is an API call to backend, so meanwhile there is a loading Spinner will be shown until there is an response from the API. I'm using redux as state management, so…
7
votes
2 answers

Update state from deeply nested component without re-rendering parents

I have a form page structured more or less as follows:
1
2 3
42 43