rhooks
TypeScript icon, indicating that this package has built-in type declarations

1.2.3 • Public • Published

React custom hooks

Build Status Coverage Status

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

Dependencies (0)

    Dev Dependencies (10)

    Package Sidebar

    Install

    npm i rhooks

    Weekly Downloads

    2

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    13.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • alsotang