Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

call forceUpdate() on component when redux state updates

I have an issue with redux state being updated successfully, but react component not re-rendering, after some research I believe [forceUpdate()][1] can solve my issue, but I am unsure of correct way to implement it i.e. after redux state updates. I tried looking up examples on github, but had no luck.

like image 702
Ilja Avatar asked Feb 23 '16 17:02

Ilja


People also ask

Does component Rerender When Redux state changes?

React-redux component does not rerender on store state change.

How do you call forceUpdate in React?

Forcing an update on a React class component In any user or system event, you can call the method this. forceUpdate() , which will cause render() to be called on the component, skipping shouldComponentUpdate() , and thus, forcing React to re-evaluate the Virtual DOM and DOM state.

How do you're-render a functional component in React when state changes?

React components automatically re-render whenever there is a change in their state or props. A simple update of the state, from anywhere in the code, causes all the User Interface (UI) elements to be re-rendered automatically. However, there may be cases where the render() method depends on some other data.

How do you force re-render in React?

Re-Render a Class Component Class Components provide you a built-in method to trigger a Re-Render. Simply use forceUpdate method to force React to Re-Render the component.


2 Answers

As others have said, forceUpdate() is basically a hack. You get updates for free whenever the props and state change. React and Redux work seamlessly together, so avoid any such hacks.

If your Redux state is updating correctly and your React view isn't, then it's most likely that you're not updating in an immutable fashion. Check your reducers.

like image 179
David L. Walsh Avatar answered Sep 27 '22 20:09

David L. Walsh


It is possible that your issues is that the state you are updating is not a top level property. react calls a "shallowEqual" method to tell whether the props have updated. This means all top level properties, but if you are changing a deeper property and all the top level ones are the same then you will not rerender.

I'm not sure if this would be the case with redux maybe it's doing something more sophisticated but I know that is the workflow in react. It's worth taking a look.

like image 35
Raif Avatar answered Sep 27 '22 21:09

Raif