https://github.com/quisido/use-update-effect

useUpdateEffect is a React hook implementation of componentDidUpdate
https://github.com/quisido/use-update-effect

javascript js npm npm-module npm-package npmjs react react-hooks reactjs

Last synced: 26 days ago
JSON representation

useUpdateEffect is a React hook implementation of componentDidUpdate

• Host: GitHub
• URL: https://github.com/quisido/use-update-effect
• Owner: quisido
• License: mit
• Created: 2020-04-05T00:00:18.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-08T22:14:34.000Z (over 3 years ago)
• Last Synced: 2024-10-06T15:12:28.515Z (about 1 month ago)
• Topics: javascript, js, npm, npm-module, npm-package, npmjs, react, react-hooks, reactjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-update-effect
• Size: 13.7 KB
• Stars: 10
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useUpdateEffect

[![version](https://img.shields.io/npm/v/use-update-effect.svg)](https://www.npmjs.com/package/use-update-effect)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/use-update-effect.svg)](https://www.npmjs.com/package/use-update-effect)

[![downloads](https://img.shields.io/npm/dt/use-update-effect.svg)](https://www.npmjs.com/package/use-update-effect)

`useUpdateEffect` is a React hook that mimics the behavior of

`componentDidUpdate` in function components.

You may also like

[`use-update-layout-effect`](https://www.npmjs.com/package/use-update-layout-effect).

## Install

- `npm install use-update-effect --save` or

- `yarn add use-update-effect`

## Use

You use the `useUpdateEffect` the same way you would use the `useEffect` hook.

Provide an effect callback and a dependency list, and the effect callback will

only execute when the dependency list updates.

For a behavior exactly the same as `componentDidUpdate`, provide an empty (`[]`)

or no (`undefined`) dependency list.

In the following example, there is no `alert` when the component mounts; but

when the username _changes_, an `alert` appears.

```javascript

import useUpdateEffect from 'use-update-effect';

function MyComponent({ username }) {

  useUpdateEffect(() => {

    alert(`Now logged in as ${username}!`);

  }, [username]);

  return 
{username}
;

}

```


In the following example, a _controlled_ input is allowed to have an in-flight

value until "Apply" is clicked. By using an update effect, we override the

in-flight value when a _new_ controlled value is provided. This is useful when a

controlled value may have more than one controlling component.

```javascript

import { useState } from 'react';

import useUpdateEffect from 'use-update-effect';

function MyComponent({ onChange, value }) {

  const [localValue, setLocalValue] = useState(value);

  useUpdateEffect(() => {

    setLocalValue(value);

  }, [value]);

  return (

    <>

       {

          setLocalValue(e.target.value);

        }}

        value={localValue}

      />

      

    >

  );

}

```