npm install --save set-future-state
# or
yarn add set-future-stateWarning: 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 using cancelable Promises, but as Aldwin Vlasblom explains:
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.
This library has a single default export: the function withFutureState().
withFutureState() type signature (in flow notation)
type SetFutureState<P, S> = <E, V>(
self: Component<P, S>,
eventual: Future<E, V> | (() => Promise<V>),
reducer: (value?: V, prevState: S, props: P) => $Shape<S> | null,
onError?: (error: E) => *
) => void
declare export default function withFutureState<P, S>(
factory: (setFutureState: SetFutureState<P, S>) => Class<Component<P, S>>
): Class<Component<P, S>>withFutureState() is an Inheritance Inversion Higher-Order Component. It takes a single argument, a factory function, which must return a React Class Component (i.e. a class 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.
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 ? (
<p>Loading . . .</p>
) : (
<p>{JSON.stringify(this.state.data)}</p>
)
}
}
)setFutureState() takes the following 4 arguments:
-
self(required)Pass
thisas the first argument, so thatsetFutureState()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 thereducer. - a
Future.
- a function that returns a
-
reducer(required)The third argument should be a function that takes 3 arguments, and returns your updated state. It is called when your
eventualresolves. It works exactly like the function form ofsetState: return a partial state object, and it will merge it into your existing state; returnnull, and it will do nothing. The arguments passed toreducerare:value: the resolved value from youreventual(PromiseorFuture)prevState: your component's existing stateprops: your component's props
-
onError(optional)The fourth and final argument is optional: a function that is called if the
eventual(PromiseorFuture) rejects. It is called with the rejection reason (ideally anErrorobject).
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.
setFutureState is transpiled with Babel, to support all browsers that ship native WeakMap support. You can see a list of compatible browser versions on MDN.
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent