# use-update-layout-effect

> DESCRIPTION

Latest version **1.0.0** (published 2020-04-04) · 0 weekly downloads

## Install

```sh
npm install use-update-layout-effect
pnpm add use-update-layout-effect
yarn add use-update-layout-effect
bun add use-update-layout-effect
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-04-04 |
| First published | 2020-04-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Charles Stover |
| Maintainers | charlesstover |

## Links

- npm: https://www.npmjs.com/package/use-update-layout-effect
- Repository: https://github.com/CharlesStover/use-update-layout-effect
- Homepage: https://www.npmjs.com/package/use-update-layout-effect
- Issues: https://github.com/CharlesStover/use-update-layout-effect/issues
- npm.io page: https://npm.io/package/use-update-layout-effect

## Recent versions

- 1.0.0 (latest) — 2020-04-04

## 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) [![build](https://api.travis-ci.com/CharlesStover/use-update-layout-effect.svg)](https://travis-ci.com/CharlesStover/use-update-layout-effect/)

`useUpdateLayoutEffect` is a React hook that mimics the behavior of
`componentDidUpdate` in function components.

- [Install](#install)
- [Use](#use)
- [Sponsor](#sponsor)

## 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 <div>{username}</div>;
}
```

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

function MyComponent({ onChange, value }) {
  const [localValue, setLocalValue] = React.useState(value);

  useUpdateLayoutEffect(() => {
    setLocalValue(value);
  }, [value]);

  return (
    <>
      <input
        onChange={e => {
          setLocalValue(e.target.value);
        }}
        value={localValue}
      />
      <input onClick={onChange} type="submit" value="Apply" />
    </>
  );
}
```

## Sponsor 💗

If you are a fan of this project, you may
[become a sponsor](https://github.com/sponsors/CharlesStover)
via GitHub's Sponsors Program.

---
_Source: https://npm.io/package/use-update-layout-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._