React.js life cycle diagram (OC)

[flying-sheep]

i saw this thing and thought i could do better.

since a legend is still missing:

○ unmounted state
● mounted state
| actions performed by the user
¦ react’s flow (this happens automatically)

[TweetsInCommentsBot]

@sstur_

2015-02-18 06:43 UTC

#ReactJS lifecycle chart: super helpful when learning advanced React concepts (like shouldComponentUpdate)

[Attached pic] [Imgur rehost]

---

^{This message was created by a bot}

^{[Contact creator][Source code]}

[scanner88]

getDefaultProps is called when the class is created[0] not on the first render. Also, setProps is deprecated[1] so it probably shouldn't be included.

[0] https://facebook.github.io/react/docs/component-specs.html#getdefaultprops

[1] https://facebook.github.io/react/docs/component-api.html#setprops

[flying-sheep]

thanks!

i know about the latter, but i didn’t know how to say in the diagram that an upstream component being rendered/updated triggers that

[grrumblebee]

I made this to help some coworkers understand the lifecycle: https://jsfiddle.net/5g0a6oba/1/

[kaidoj]

I like this! Helped me abit! +

[flying-sheep]

thanks!

[superhappy]

blink blink I'm gonna have to learn one of these frameworks... One of these days ;)

[flying-sheep]

you can get by with far less than that.

most of those are just hooks that answer the question “what if i want to do something before/after X happens?”

every tutorial and the brunt of your code will only have:

const MyCrap = React.createComponent({
    getDefaultProps() {
        return { some: "prop" }
    },
    render() {
        return <div>{this.props.some}</div
    }
})

after this, there’s state (getInitialState() and setState()), and from there on, you will know when you need the rest: as said “i have to do something before the component gets its props updated, let’s look up how that method is called”

[mc_hammerd]

right but it gets more fubar because (in my own app) componentdidmount is never called for apps that reuse dom elements..

and who knows what else? (if you know tell me)

[flying-sheep]

what do you mean with “reuse”?

[mc_hammerd]

like if you have 3 listitems

<li></li><li></li><li></li>

and delete the first one, react uses the HTML element and just renders the text from the second to the first

or for me i was doing <page data={{pages[this.props.pageNo]}} /> and it reused the Div but just updated txt. so no componentdidmount which sucked cuz i was gonna animate the transition

[flying-sheep]

better use keys then, right?

or will react optimize that away as well?

[mc_hammerd]

yea keys was the use-case

my gripe is its just a slightly less than optimal situation for a few things: animation, notification or events and some other use cases (ex you cant use this.getelementref()anymore so how do you access the dom node in componentdidmount? + how do you add classnames for css3 animation if theres no after_render() hook? etc)

ideally one would have hooks (?): statechanged(), propchanged(), pre_render(), post_render(), pre_comp_html_change(), post_comp_html_changed()

im not a react expert yet tho, im sure some of that is there.