Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benadamstyles/set-future-state
Safely setState in the future
https://github.com/benadamstyles/set-future-state
cancellation futures promise react react-native reactjs setstate
Last synced: 4 days ago
JSON representation
Safely setState in the future
- Host: GitHub
- URL: https://github.com/benadamstyles/set-future-state
- Owner: benadamstyles
- License: mit
- Created: 2018-03-26T17:44:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-05-01T16:06:03.000Z (over 5 years ago)
- Last Synced: 2024-10-16T03:03:12.298Z (2 months ago)
- Topics: cancellation, futures, promise, react, react-native, reactjs, setstate
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/set-future-state
- Size: 535 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# setFutureState
[](https://www.npmjs.com/package/set-future-state)
[](https://travis-ci.org/Leeds-eBooks/set-future-state)
[](https://greenkeeper.io/)
```sh
npm install --save set-future-state
# or
yarn add set-future-state
```
# The Problem
> Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
In React, calling `this.setState()` in an `async` function, or in the `.then()` method of a `Promise`, is very common and very useful. But if your component is unmounted before your async/promise resolves, you’ll get the above error in your console. The React blog [suggests](https://reactjs.org/blog/2015/12/16/ismounted-antipattern.html) using cancelable Promises, but as [Aldwin Vlasblom explains](https://medium.com/@avaq/broken-promises-2ae92780f33):
> Because Promises were designed to have no control over the computation and make their values accessible to any number of consumers, it makes little sense, and turns out to be quite a challenge, to implement cancellation.
Enter [Futures](https://github.com/fluture-js/Fluture/wiki/Comparison-to-Promises).
# The Solution
This library has a single default export: the function `withFutureState()`.
withFutureState() type signature (in flow notation)
```js
type SetFutureState
= (
self: Component
,
eventual: Future | (() => Promise),
reducer: (value?: V, prevState: S, props: P) => $Shape | null,
onError?: (error: E) => *
) => void
declare export default function withFutureState
(
factory: (setFutureState: SetFutureState
) => Class>
): Class>
```
### Usage
`withFutureState()` is an [Inheritance Inversion Higher-Order Component](https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e#5247). It takes a single argument, a factory function, which must return a React Class Component (i.e. a [class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) that inherits from `React.Component` or `React.PureComponent`). The factory function receives a single argument, `setFutureState`: your tool for safely updating your component's state in the future.
```js
import React, {Component} from 'react'
import withFutureState from 'set-future-state'
export default withFutureState(
setFutureState =>
class MyComponent extends Component {
state = {
loading: true,
fetchCount: 0,
data: null,
}
componentDidMount() {
setFutureState(
this,
() => fetch('https://www.example.com'),
(data, prevState, props) => ({
data,
loading: false,
fetchCount: prevState.fetchCount + 1,
}),
error => console.error(error)
)
}
render() {
return this.state.loading ? (
Loading . . .
) : (
{JSON.stringify(this.state.data)}
)
}
}
)
```
`setFutureState()` takes the following 4 arguments:
- **`self`** (required)
Pass `this` as the first argument, so that `setFutureState()` can update your component's state.
- **`eventual`** (required)
The second argument should be either:
- a function that returns a `Promise`. When it resolves, the resolved value will be passed to the **`reducer`**.
- a [`Future`](https://github.com/fluture-js/Fluture).
- **`reducer`** (required)
The third argument should be a function that takes 3 arguments, and returns your updated state. It is called when your **`eventual`** resolves. It works _[exactly like the function form of `setState`](https://reactjs.org/docs/react-component.html#setstate)_: return a partial state object, and it will merge it into your existing state; return `null`, and it will do nothing. The arguments passed to **`reducer`** are:
- `value`: the resolved value from your **`eventual`** (`Promise` or `Future`)
- `prevState`: your component's existing state
- `props`: your component's props
- **`onError`** (optional)
The fourth and final argument is optional: a function that is called if the **`eventual`** (`Promise` or `Future`) rejects. It is called with the rejection reason (ideally an `Error` object).
**IMPORTANT:** If you leave out **`onError`**, your **`reducer`** will be called if the **`eventual`** resolves **AND** if it rejects. This is useful, for example, to remove loading spinners when an ajax call completes, whether or not it was successful.
# Browser Support
`setFutureState` is transpiled with [Babel](https://babeljs.io/), to support all browsers that ship native `WeakMap` support. You can see a [list of compatible browser versions on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#Browser_compatibility).