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

a useLayoutEffect hook that only triggers on update (not on mount)
https://github.com/quisido/use-update-layout-effect

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

Last synced: 14 days ago
JSON representation

a useLayoutEffect hook that only triggers on update (not on mount)

• Host: GitHub
• URL: https://github.com/quisido/use-update-layout-effect
• Owner: quisido
• License: mit
• Created: 2020-04-04T23:01:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-05-08T22:15:18.000Z (over 3 years ago)
• Last Synced: 2024-10-08T07:58:52.354Z (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-layout-effect
• Size: 13.7 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# useUpdateLayoutEffect

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

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

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

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

`componentDidUpdate` in function components.

You may also like

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

## Install

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

- `yarn add use-update-layout-effect`

## Use

You use the `useUpdateLayoutEffect` the same way you would use the

`useLayoutEffect` 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 useUpdateLayoutEffect from 'use-update-layout-effect';

function MyComponent({ username }) {

  useUpdateLayoutEffect(() => {

    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 layout 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 useUpdateLayoutEffect from 'use-update-layout-effect';

function MyComponent({ onChange, value }) {

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

  useUpdateLayoutEffect(() => {

    setLocalValue(value);

  }, [value]);

  return (

    <>

       {

          setLocalValue(e.target.value);

        }}

        value={localValue}

      />

      

    >

  );

}

```