What is "Tearing" in the context of the React-Redux?

Question

Version 6.0 of React-Redux mentions:

In version 6, all components read the same current store state value from context, which means the tree will be consistent and not have "tearing".

I get that this is beneficial, but I'd like to understand the meaning of "tearing" in this context better, and I'd like to understand how the new approach they outline actually reduces "tearing," if anyone can elaborate.

Answer 1

I'm a Redux maintainer, and I wrote that paragraph.

This is specifically a concern that has been raised by Andrew Clark from the React team as a potential issue with external state management tools when used with React's upcoming "Concurrent Mode".

In Concurrent Mode, React will be able to pause a render pass through the tree, and resume calculating the rest of the tree later.

If the components in the tree are reading an external value, and that value were to change while React's rendering is paused, then some of the upper components in the tree might have rendered using external value 1, and some of the later components might have rendered using external value 2. That would result in inconsistent render output, because different parts of the tree determined their behavior based on differing values in the same render pass. This is "tearing".

Part of the idea behind using createContext for v6 was that since React ensures a given render pass uses the same context value everywhere, there would be no chance of tearing.

The v6 implementation does work, but it's not as efficient in some cases as we'd hoped. We're currently working on coming up with a different internal implementation that goes back to using direct subscriptions instead. This does potentially mean that tearing is a possibility again, but at this point we need to sit back and wait for the React team to finish putting Concurrent Mode together before we can spend time seeing what the issues really are.