# react-state-effects

> React useState hook enhanced with side effects

Latest version **1.0.4** (published 2019-06-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-state-effects
pnpm add react-state-effects
yarn add react-state-effects
bun add react-state-effects
```

## Health

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

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

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-06-21 |
| First published | 2019-06-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Artem Puchenkin |
| Maintainers | apuchenkin |

## Links

- npm: https://www.npmjs.com/package/react-state-effects
- Repository: https://github.com/apuchenkin/react-state-effects
- Homepage: https://github.com/apuchenkin/react-state-effects#readme
- Issues: https://github.com/apuchenkin/react-state-effects/issues
- npm.io page: https://npm.io/package/react-state-effects

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.8.6

## Recent versions

- 1.0.4 (latest) — 2019-06-21
- 1.0.3 — 2019-06-14
- 1.0.2 — 2019-06-10
- 1.0.0 — 2019-06-08

## README

# React `useStateEffects` hook

Allows excecution of side effects immediately after state is set by `setState` hook.

## Example

```jsx
import useStateEffects from 'react-state-effects';

const Example = ({ callback, children }) => {
  const [state, setState] = useStateEffects(1);

  React.useEffect(() => {
    setState(state$ => [state$ + 1, callback]);
  }, [])

  return children;
}
```

`setState` could accept zero, one or multiple callbacks:
```js
const cb1 = () => {...}
const cb2 = () => {...}

setState(state => [state + 1]);
setState(state => [state + 1, cb1]);
setState(state => [state + 1, cb1, cb2]);
```

In case current state is needed within callback, latest state could be injected by saving it within ref:

```jsx
import useStateEffects from 'react-state-effects';

const Example = ({ callback, children }) => {
  const [state, setState] = useStateEffects(1);
  const stateRef = React.useRef(state);

  React.useEffect(() => {
    setState(state$ => [state$ + 1, () => callback(stateRef.current)]);
  }, [])

  React.useEffect(() => {
    stateRef.current = state;
  }, [state])

  return children;
}
```

---
_Source: https://npm.io/package/react-state-effects · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._