https://github.com/alsotang/rhooks

custom react hooks including class lifecycle style
https://github.com/alsotang/rhooks

Last synced: 2 months ago
JSON representation

custom react hooks including class lifecycle style

• Host: GitHub
• URL: https://github.com/alsotang/rhooks
• Owner: alsotang
• License: mit
• Created: 2019-01-29T08:36:15.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-03-17T15:37:20.000Z (almost 6 years ago)
• Last Synced: 2024-10-13T00:28:49.496Z (3 months ago)
• Language: TypeScript
• Size: 15.6 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## React custom hooks

[![Build Status](https://travis-ci.org/alsotang/rhooks.svg?branch=master)](https://travis-ci.org/alsotang/rhooks) [![Coverage Status](https://coveralls.io/repos/github/alsotang/rhooks/badge.svg?branch=master)](https://coveralls.io/github/alsotang/rhooks?branch=master)

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.

```js

function App(props) {

  useConstructor(() => {

    console.log('this should console.log only once when component instance init. Before didMount')

  })

  return (
);

}

```


### useDidMount(fn)

Like componentDidMount

```js

function App(props) {

  useDidMount(() => {

    console.log('this should console.log only once when the component is mounted. After constructor')

  })

  return (
);

}

```


### useDidUpdate(fn)

Like componentDidUpdate.

```js

function App(props) {

  useDidUpdate(() => {

    console.log('This should console.log every time when component update. But do not occur in the didMount.')

  })

  return (
);

}

```


### useWillUnmount(fn)

Like componentWillUnmount

```js

function App(props) {

  useWillUnmount(() => {

    console.log('this should console.log only once when the component is about to unmount')

  })

  return (
);

}

```


### useForceRender(fn)

Force component rerender

```js

function App(props) {

  const forceRender = useForceRender()

  return (
{Date.now()}
);

}

```


## License

MIT