react-lifecycles-log

Quickly debug the life cycle of the react component.

"peerDependencies": { "react": "^16.3.1" }

Install

npm install react-lifecycles-log -D

Usage

import React from 'react';
import LifeHOC from 'react-lifecycles-log';

@LifeHOC
export defalut class C extends React.Component {
    ...
}

// or

LifeHOC(C)

Test

check it out

  T -> constructor {} {}

  T -> getDerivedStateFromProps {} {}

  T -> render[1]

  child.constructor

  child.getDerivedStateFromProps {} {}

  child.render

  child.componentDidMount

  T -> componentDidMount

  T -> getDerivedStateFromProps { newProps: 'newProps' } {}

  T -> shouldComponentUpdate { newProps: 'newProps' } {} {}

  T -> render[2]

  child.getDerivedStateFromProps { newProps: 'newProps' } {}

  child.shouldComponentUpdate { newProps: 'newProps' } {} {}

  child.render

  child.componentDidUpdate {} {} undefined

  T -> componentDidUpdate {} {} undefined

  T -> componentWillUnmount

  child.componentWillUnmount

  -------------- closed ------------------

  child.constructor

  child.getDerivedStateFromProps {} {}

  child.render

  child.componentDidMount

License

MIT