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
Post a Comment