question-mark
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.

shouldComponentUpdate() is ignored when Legacy Context and New Context are co-existing

See original GitHub issue

Do you want to request a feature or report a bug?

bug.

What is the current behavior?

In a component tree where legacy context and new context are co-exisiting, when components are placed on tree nodes under the legacy context provider and between new context provider and consumer, components are always rendered even if shouldComponentUpdate() returns false in a parent component.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

https://jsfiddle.net/fdrgz9c4/15/

The above is the minimal case I’ve created without other dependencies, but first I found this behaviour in my Redux application, which uses legacy style context to map the state in store.

What is the expected behavior?

Should not call render() when shouldComponentUpdate() returns false in parent components, as same as the other cases (it prevents rendering when it is located without legacy context or not between new context provider / consumer tree. See the above fiddle)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 16.5.2, maybe in older versions. No OS/browser dependencies I believe.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
markeriksoncommented, Oct 17, 2018

@stomita , @kafein : we’re working on a new React-Redux version 6 that switches to use createContext instead of legacy context. Please see https://github.com/reduxjs/react-redux/pull/995 and https://github.com/reduxjs/react-redux/pull/1000 for our work-in-progress PRs, both of which are available on NPM as tags next-995 and next-1000 respectively. I’ve also been fiddling with some more tweaks that I hope may be worth pushing as updates in the near future.

I’d appreciate it if you could try out those builds and see how well they work overall, and give us feedback in those issues.

2reactions
gaearoncommented, Oct 16, 2018

There are a few bugs like this but they are rather difficult to fix and would increase the code size. While this may not be satisfactory our recommendation is to migrate away from legacy context when you can. If you can look into fixing this it would be great though.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Legacy Context - React
The problem is, if a context value provided by component changes, descendants that use that value won't update if an intermediate parent returns...
Read more >
shouldComponentUpdate equivalent for functional component ...
The component should rerender ONLY when its props change. State changes should NOT trigger a rerender. This behaviour can be implemented with a ......
Read more >
Why React Context is Not a "State Management" Tool (and ...
The primary problem with legacy context was that updates to values passed down via context could be "blocked" if a component skipped rendering ......
Read more >
Redux vs Context API: When to use them - DEV Community ‍ ‍
Since many components relied on shouldComponentUpdate for performance optimizations, the legacy context was useless for passing down plain data.
Read more >
Why Context Should Not be Used for State Management in ...
The main issue with legacy context was that if a component missed rendering via shouldComponentUpdate, updates to values passed down via context ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found