react-redux connect() function mapStateToProps is updating but component not re-rendering

Question

I'm using React, Redux and React-Redux Provider function

const mapStateToProps = (store: any) => {
    console.log("mapStateToProps", store.textTwo);
    return store.textTwo;
};

if I use above mapStateToProps function to connect method of react-redux and update the state it will console.log changes in mapStateToProps function but not a rerendering component, not even it comes componentWillReceiveProps hook.

but when I add spread operator i.e. mutate the mapStateToProps return data it will re-render the complete component.

const mapStateToProps = (store: any) => {
    console.log("mapStateToProps", store.textTwo);
    return { ...store.textTwo }; <-- this will re render complete component
};

how to pass state to props of the component without re-rendering complete component.

--- Update ---

sample state data

store = {
    textTwo: {
        headerText: 'Sample',
        list: [
            {
                id: 1,
                name: 'test 1'
            }
        ]
    },
    text: {}
}

headerText is a child component to show the header title. the list is an Array of data that I'm iterating and listing name.

Tried below solution (given by @Siva Kondapi Venkata) and it's working but if I add a new item in the list, the header component is also re-rendering.

const mapStateToProps = (store: any) => ({
  textTwo: store.textTwo
});

Siva K V Siva K V · Accepted Answer · 2020-02-17T11:14:53

You need to do like this. Return the props you are interested.

const mapStateToProps = (store: any) => ({
  textTwo: store.textTwo
});

const mapDispatchToProps = {

};

export default connect(mapStateToProps, mapDispatchToProps)(Component);

react-redux connect() function mapStateToProps is updating but component not re-rendering

1 Answers