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