I have the problem where I receive in my componentDidUpdate(prevProps, prevState) a new reference of the object in the incoming this.props, so even the values are equal, I get misleading object comparisons when I compare this.props with the prevProps object. To track this, I'd like to know why this happens and I think is because of Deriving Data with Selectors.

So, consider the typicall scenario

class FooComponent extends Component {
    constructor(props) {
        super(props)
    }
    ....
}

const mapStateToProps = (state, props) => ({
    stateSlice: getStateSlice(state)
}

const mapDispatchToProps = (dispatch) => ({
    ...
})

export default connect(mapStateToProps, mapDispatchToProps)(FooComponent))

For the scenario of a complex app, big global state and complex getStateSlice function, I'd like to know if a new reference has been created.

I tried to compare getStateSlice(state) with state.stateSlice in the mapStateToProps with a refCheck function like this:

function refCheck(state, props) {
    if (props.stateSlice === getStateSlice(state)) {
        console.log('sameRef!!');
    }
    return getStateSlice(state);
}

const mapStateToProps = (state, props) => ({
    stateSlice: refCheck(state)
}

And everything works, but I keep getting the same value props in the ComponentDidUpdate() and a different reference. Prof if this is that I obtain in the componentDidUpdate(prevProps, prevState)

prevProps === this.props: false
JSON.stringify(prevProps) === JSON.stringify(this.props): true

How may I check if a new reference is created to evaluate if a selector works correctly and does not create new ref at the state info retrieve step for the same values by mistake? It also'd be helpful to be able to check that at the reducer level and log whether the reducer is creating a new refernce or not.