Description:

This is React lifecycle application. It might help you to understand the React component chain. You can perform many actions on example React component and see in real time what methods are executed. This application build diagram with methods below the menu. So you can see the order of the methods at any time.

How to use:

Just open the html file in your browser.

Screenshot:

Features:

• shows lifecycle for ECMAScript 5 (ES5) syntax
• shows lifecycle for ECMAScript 6 (ES6) syntax
• mount and unmount React component
• mutation state and props
• send new props to React component
• getDefaultProps for ES6 syntax
• call forceUpdate()
• call render()
• change shouldComponentUpdate() method return value
• call setState()
• call setProps()
• info if component successfully updated
• info about deprecated methods - ES6 setProps()
• info about mutation state and props
• and maybe something more :-)

Live demo:

Live demo: here

License:

MIT - my code, libraries have its own licenses, attached only to get it to work