React-life-hooks NPM

react-life-hooks

React hooks for better managing lifecycles for function component.

This lib want keep as helpers, but not targeting a fully Custom Hooks.

Install

You can install from NPM, or use files in lib.

npm install --save react-life-hooks

Usage

This lib require React 16.8.0 or later, since it's based on React Hooks API.

Each helper can be imported individually:

import {
  onInit,
  onDidMount,
  onDidUpdate,
  onWillUnmount,
  onChange,
  useLifeState,
} from 'react-life-hooks'

function Hello(props){
  onInit(()=>{
    console.log('this is like constructor');
  })
  onDidMount(()=>{
    console.log('this is like componentDidMount');
  });
  onDidUpdate(()=>{
    console.log('this is like componentDidUpdate');
  });
  onWillUnmount(()=>{
    console.log('this is like componentWillUnmount');
  });
  onChange(props, prevProps=>{
    console.log('this is like componentWillReceiveProps')
  })

  // state, setState is life time, same reference in each render
  const [state, setState] = useLifeState({x:1})
  // below have no bugs any more
  const onClick = () => {
    setState({x: state.x+1})
  }

  return <div>
    <span>{state.x}</span>
    <button onClick={onClick}></button>
  </div>
};