https://github.com/bhovhannes/use-force-update-hook

React hook which allows forceUpdate() in functional components
https://github.com/bhovhannes/use-force-update-hook

forceupdate functional-components hook react

Last synced: 15 days ago
JSON representation

React hook which allows forceUpdate() in functional components

• Host: GitHub
• URL: https://github.com/bhovhannes/use-force-update-hook
• Owner: bhovhannes
• License: mit
• Created: 2019-04-05T18:46:00.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2024-04-14T08:35:21.000Z (7 months ago)
• Last Synced: 2024-04-14T09:53:28.226Z (7 months ago)
• Topics: forceupdate, functional-components, hook, react
• Language: TypeScript
• Homepage:
• Size: 2.81 MB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-force-update-hook

[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Coverage][codecov-image]][codecov-url]

React hook which gives [forceUpdate](https://reactjs.org/docs/react-component.html#forceupdate) to functional components.

## Install

```

npm i --save-dev use-force-update-hook

```

## Usage

This package exports 2 hooks: `useForceUpdate` and `useForceUpdateWithCallback`.

Normally you shoud use `useForceUpdate` hook:

```javascript

import React from 'react'

import ReactDOM from 'react-dom'

import { useForceUpdate } from 'use-force-update-hook'

function MyAwesomeComponent() {

  const forceUpdate = useForceUpdate()

  console.log('render')

  return (

    


      Click to rerender MyAwesomeComponent

    

  )

}

```


In rare cases you may need to do something right after component `forceUpdate` finishes.  

In that case `useForceUpdateWithCallback` can be useful. It uses `useLayoutEffect` under the hood.

```javascript

import React from 'react'

import ReactDOM from 'react-dom'

import { useForceUpdateWithCallback } from 'use-force-update-hook'

function MyAwesomeComponent() {

  function handleUpdate() {

    console.log('just updated')

  }

  const forceUpdate = useForceUpdateWithCallback(handleUpdate)

  console.log('render')

  return (

    


      Click to rerender MyAwesomeComponent

    

  )

}

```


## License

MIT (http://www.opensource.org/licenses/mit-license.php)

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat

[license-url]: LICENSE

[npm-url]: https://www.npmjs.org/package/use-force-update-hook

[npm-version-image]: https://img.shields.io/npm/v/use-force-update-hook.svg?style=flat

[npm-downloads-image]: https://img.shields.io/npm/dm/use-force-update-hook.svg?style=flat

[codecov-url]: https://codecov.io/gh/bhovhannes/use-force-update-hook

[codecov-image]: https://img.shields.io/codecov/c/github/bhovhannes/use-force-update-hook.svg