Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

State updates can lead to multiple re-renders

See original GitHub issue

What is the current behavior?

In our application, we provide part of our state as context to multiple components. With the latest update 7.0.1 we see an error popping up that is the result from the context and the state a component use being out of sync. Both components are connected to the same store.

The scenario is as follows:

Parent component (provides part of the state as context)
Child component uses both context and also connects to store

If an update is dispatched to the store then a re-render is caused by the parent component putting a new value on the context before the child component is notified about the change in the data. This leads to a situation where the child component operates on stale data while simultaneously referring to new data coming in through the context. This then causes our application to crash.

While creating this issue I realize that we’re using react-broadcast@0.7.1 for the context. I’m going to rewrite that to the official context API and see whether this influences the behavior.

[UPDATE]: Using the official context API does not solve this issue.

What is the expected behavior?

Both updates are flushed in one go and the application only re-renders once with all components operating on the same version of the data.

Which versions of React, ReactDOM/React Native, Redux, and React Redux are you using? Which browser and OS are affected by this issue? Did this work in previous versions of React Redux?

react@16.8.6, react-dom@16.8.6
react-redux@7.0.1
redux@4.0.1

Issue Analytics

State:
Created 4 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

2reactions

frontendphilcommented, Apr 10, 2019

Thanks for being my rubber duck. After I gave that whole topic some more thought I came to the same conclusion. You’re absolutely right and this was a well hidden but super weird design decision we made. Changing it makes the code easier to follow, highlights dependencies and also makes tests easier to write and maintain. It also might explain some weird bugs we’ve seen in the past. Definitively a case of a shitty abstraction where someone was too lazy to type and used context where they shouldn’t.

0reactions

frontendphilcommented, Apr 13, 2019

Turns out 7.0.2 doesn’t cause the problem described above. I’ll stop my investigation for now. Anyway thanks for the discussion!

Top Results From Across the Web

How To Prevent Unnecessary React State Update Re-renders

This article will cover several ways to prevent either state updates or re-renders from occurring. Not only will we look into the implementation ......

React state batch updating - reduce re-renders | The Startup

Batch updating is a React's interesting feature, that combines state updates. The main idea is that no matter how many setState calls you...

setstate is causing Too many re-renders - Stack Overflow

here iam trying to filter the product array using keyword received from the input state able to filter the array, but while doing...

Too many re-renders. React limits the number of renders to ...

The issue is that the setCounter function gets invoked when the component renders, updates the state, which causes a re-render and does that...

React re-renders guide: everything, all at once - Developer way

Re-render happens when React needs to update the app with some new data. Usually, this happens as a result of a user interacting...