reactjs - React.js + Immutable.js: best practices for shouldComponentUpdate with filtered lists -


what best practices filtering immutable.list passing down child components regards shouldcomponentupdate?

illustrative example: i'm building calendar. has <week> component, holding 7 <day> components. <week> receives list of calendar events, renders <day>s , passes filtered subset of events each of them props.

all <day> components have purerendermixin attached them, intent of preventing useless re-renders. but, given immutable.list.filter returns new object each time, when single event added, every <day> component receive 'new' event list prop , re-render, when 1 of them have same content.

my current idea writing custom shouldcomponentupdate compares hashcodes of every list component decides re-render based on that. there better, more established way it?

code example requested. assume <week> wired flux store , gets events it.

day = react.createclass({   proptypes: { events: react.proptypes.instanceof(immutable.list) },    mixins: [ react.addons.purerendermixin ],    render: function(){     const events = this.props.events.map((event) => {       return <div key={event.get('id')}>{event.get('name')}</div>     })      return <div>{events}</div>   } })  week = react.createclass({   proptypes: { events: react.proptypes.instanceof(immutable.list) },    mixins: [ react.addons.purerendermixin ],    render: function(){     const days = [1,2,3,4,5,6,0].map((weekday) => {       const dayevents = this.props.events.filter(event => event.get('weekday') === weekday)        return <day events={dayevents} key={weekday} />      })      return <div>{days}</div>   } }) 

you should restructure model this-

{'monday':{...events...}, 'tuesday':{...events...}, ...} 

this way can pass right set of events right child day component.

update noticed using numbers weekdays, substitute day names numbers, or use list/array store events. doing away need of calling filter.


Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -