javascript - Refs in mount/update component lifecycle -

i have infinite scrolling list scrolls in both directions. list presents 5 item-per-row grid represents 5 work days in 7 day week. days zebra stripped month (even months have darker color). want position month title in column left of grid, starting @ first day of month, or earliest day available month (given ajaxed in data -- not start first weekday of month).

i have necessary logic in place figure out day first day (as i'm showing weekdays, if first falls on weekend, start of month might not first).

i have following far:

1. when rendering grid, tag beginning of month , end of month ref in format of yyyymm_start or yyyymm_end.

2. i render monthtitle component monthstamp prop in same format of yyyymm, findmonthnode prop receives function lookup start , end node on parent component (using regex).

3. in monthtitle component, in componentdidmount, can position title absolutely relative start node month. invoke exact same function in componentdidupdate.

my issue when scroll list (remember, infinite scroll in both directions) in time: ajax fires , loads in new tiles new month titles, , new month titles render appropriately, first of original titles not update accordingly. after poking around, realized this.refs in parent component in componentdidupdate does not equal this.refs in parent component in componentdidmount. componentdidmount seems have complete list, whereas componentdidupdate has list of nodes existed before new nodes (from ajax response) have been mounted.

since componentdidupdate not have new refs, cannot position first month title accordingly, , remains stuck rendered in componentdidmount, which--given new data--is incorrect position.

---

why this.refs different in these 2 functions (componentdidmount & componentdidupdate)? can ensure have access complete this.refs when mounting , updating components?

using react 0.13.3 fyi

if @ component lifecycle specs here, see componentdidupdate run every time component has been updated (via this.setstate in either component or 1 of ancestors), not after initial render:

componentdidupdate(object prevprops, object prevstate)

invoked after component's updates flushed dom. method not called initial render.

componentdidmount on other hand run after initial render, not after updates via setstate:

componentdidmount()

invoked once, on client (not on server), after initial rendering occurs.

so if update state (via this.setstate in component) , re-render component, potentially adding new child elements have ref attributes, not visible in parent's componentdidmount in componentdidupdate.

on other hand, if update parent component , update renders new child components, child components' componentdidmount indeed fire before parent's componentdidupdate parent component not done updating until new child components have mounted , rendered properly. go this:

1. any initial childrens' componentdidmount execute (somewhat surprising perhaps, parent isn't done mounting until children have mounted, makes sense)
2. parent's componentdidmount executes
3. parent updates via setstate added children , children existing last render
4. all newly added childrens' componentdidmount execute , existing childrens' componentdidupdate execute
5. parent's componentdidupdate executes

here's jsfiddle demonstrating this.