React custom hooks

There is a collection of React custom hooks, including lifecycle style hooks simulating constructor, componentDidMount, componentDidUpdate, componentWillUnmount

According to https://overreacted.io/a-complete-guide-to-useeffect/

Keep in mind that the mental model for effects is different from componentDidMount and other lifecycles, and trying to find their exact equivalents may confuse you more than help

Install

npm install rhooks

API

useConstructor(fn)

Like in a constructor. Only run once when the function component init.

function App(props) {
  useConstructor(() => {
    console.log('this should console.log only once when component instance init. Before didMount')
  })

  return (<div></div>);
}

useDidMount(fn)

Like componentDidMount

function App(props) {
  useDidMount(() => {
    console.log('this should console.log only once when the component is mounted. After constructor')
  })

  return (<div></div>);
}

useDidUpdate(fn)

Like componentDidUpdate.

function App(props) {
  useDidUpdate(() => {
    console.log('This should console.log every time when component update. But do not occur in the didMount.')
  })

  return (<div></div>);
}

useWillUnmount(fn)

Like componentWillUnmount

function App(props) {
  useWillUnmount(() => {
    console.log('this should console.log only once when the component is about to unmount')
  })

  return (<div></div>);
}

useForceRender(fn)

Force component rerender

function App(props) {
  const forceRender = useForceRender()

  return (<div onClick="() => forceRender()">{Date.now()}</div>);
}

License

MIT