React Lifecycle Hooks
Listening to ALL your React components in a neat and simple way.
To start up:
- Install from npm
$ npm i react-lifecycle-hooks --save-dev
- Use in single file, but influence whole app!import activate from 'react-lifecycle-hooks'
Usage
After above steps, react-lifecycle-hooks
is ready to serve. It is watching every lifecycle among all components in your app. You can tell it what to do when lifecycles are invoked and even change the original behaviors!
Besides activate
, it provides another method addMiddleware
.
// #use-lifecycle-hooks.js// You can create such a new file, then you can plug/unplug this easily// Just don't forget to import this file :)import React from 'react'import activate addMiddleware from 'react-lifecycle-hooks' // You'll see basic usages with example middleware// you can tell that it logs every happening in your app from its name. { console} // Do you believe, this single middleware can turn every component class into React.PureComponent? { if lifecycleName === 'shouldComponentUpdate' const props state = componentInstance } const removeLogMiddleware = // removeLogMiddleware() will remove logEverything from middlewares // All components works like pure components now! const deactivate = // Use deactivate() to undo activate
Assume such a component is in your project.
//#my-component.jsx { return <span>Hello World!</span>}
Then every time it renders, you'll see output like this from console:
Going to execute render of MyComponent on instance {the instance} with arguments {props}.
Check out Code Sandbox Demo for more detailed usages!
Options
react-lifecycle-hooks
accepts an optional argument when activating:
options
works with these optional keys:
-
compat - It is in short for compatibility. React team has announced lifecycle changes since 16.3, that's the reason of having this option. valid values:
'legacy'
- for React <v16.3.0
'latest'
- for React >=v16.3.0
'all'
- all lifecycles, but you'll might get warnings in console.- if omitted,
react-lifecycle-hooks
will decide automatically!
-
React - Explicitly pass React or react-like lib in, for example:
-
fill - auto fill unimplemented lifecycle with
function() {}
. While few special lifecycles (likegetDerivedStateFromProps
) will be filled anyway with correct return value. Type:Boolean
, default:false
. -
transformToClass - transform function components to class components. Type:
Boolean
, default:false
.
Why react-lifecycle-hooks instead of others?
Most similar tools work as HoC or hijack React.Component
prototype methods to achieve the similar goal. But they have disadvantages:
- Developers have to add HoC decorator to each components.
It would be a disaster if there are lots of components.
- Due to
1.
, components code have be polluted.In most cases, these changes are supposed to be included only when developing. Modifying lots of component code for global needs is not a good idea.
- If hijack prototype lifecycle methods, it will not work for components who have custom lifecycle method declared.