nextContext arg in shouldComponentUpdate() method

[konsultacijos]

Do you want to request a feature or report a bug?
I think it is feature, but could be a bug also

What is the current behavior?
When I subscribe to context using React16.6.0 contextType API, component rerenders even when unused context properties was changed. So, I want to use shouldComponentUpdate(), but that method don't have nextContext argument.

Is there any other way to solve this problem?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

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

[nataliemarleny]

@konsultacijos shouldComponentUpdate does accept nextContext as an argument (code, docs), but you need to define contextTypes within a component. Excerpt from docs:

If contextTypes is defined within a component, the following lifecycle
methods will receive an additional parameter, the context object:

...

• shouldComponentUpdate(nextProps, nextState, nextContext)

...

Note that the above is a legacy API.

I think that what you want to accomplish is not possible with the new API. This is because:

• if your context value is an object you should update it by creating a new object in the same way that you would update a state of a component
• if you update the context value by creating a new object, the references of all of the properties are going to change as well, so that would mean that all of the components using the context value would rerender, irrespective of which property of the context-value they're using see @Lexicality's comment below

But my understanding is not exhaustive and all feedback is welcome.

[Lexicality]

if you update the context value by creating a new object, the references of all of the properties are going to change as well, so that would mean that all of the components using the context value would rerender, irrespective of which property of the context-value they're using

The context should work like the state does, so any scalars should remain the same and any sub-objects that have not changed should be the same object.
For example:

import React from "react";

export const MyContext = React.createContext({
    num: 0,
    bigObj: null,
});

export function MyComponent(props) {
    const [num, setNum] = React.useState(0);
    const [bigObj, _] = React.useState({
        foo: "bar",
        // etc
    });

    return (
        <div>
            <button onClick={() => setNum(num + 1)}>Click me</button>
            <MyContext.Provider value={{ num, bigObj }}>
                {props.children}
            </MyContext.Provider>
        </div>
    );
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[Lexicality]

This issue is still relevant, unless class components are being deprecated?