reactjs - Component is updating when previous props are equal to the next props -

in simple todo list application, have filterscontainer component, provides props filters component:

// filterscontainer.js import { connect } 'react-redux'; import { setvisibilityfilter } '../actions'; import filters '../components/filters';  function mapstatetoprops(state) {   const { visibilityfilter } = state.todos;    // `visibilityfilter` variable value - 'show_all'.   return {     filters: [{       title: 'all',       value: 'show_all',       active: visibilityfilter === 'show_all',     }, {       title: 'completed',       value: 'show_completed',       active: visibilityfilter === 'show_completed',     }, {       title: 'active',       value: 'show_active',       active: visibilityfilter === 'show_active',     }],   }; }  function mapdispatchtoprops(dispatch) {   return {     onfilterclick(value) {       dispatch(setvisibilityfilter(value));     },   }; }  export default connect(mapstatetoprops, mapdispatchtoprops)(filters); 

the problem is, component renders everytime state changes.

for example, toggling todo item forces rendering <filters /> component, although filters array , visibilityfilter hasn't changed.

---

if replace filters array in mapstatetoprops function string, component not rendering on every state changes:

// filterscontainer.js function mapstatetoprops(state) {   const { visibilityfilter } = state.todos;    return {     filters: '',   }; } 

full application code available @ - https://github.com/1ven/react-redux-todos

am missing something?

everytime returning new object mapstatetoprops thats why old props not equal new props. hence component gets rendered everytime

react render component if old props not equal new props in case

 return {     filters: [{       title: 'all',       value: 'show_all',       active: visibilityfilter === 'show_all',     }, {       title: 'completed',       value: 'show_completed',       active: visibilityfilter === 'show_completed',     }, {       title: 'active',       value: 'show_active',       active: visibilityfilter === 'show_active',     }],   }; 

oldprops = object

newprops = object (although content same both different objects )

oldprops==newprops //no rerender

when

return {     filters: '',   }; 

oldprops = ''; newprops = '' oldprops === newprops dont render