React’s setState is a special function, and it helps with asynchronous concurrency

componentDidMount() {
fetch('http://example.com/rss.xml')
.then((response) => response.text())
.then((response) => {
parseString(response, function (err, result) {
this.setState({
articles: JSON.stringify(result.rss.channel[0].item)
})
console.log('RAW: ' + result.rss.channel[0].item);
console.log('THIS: ' + this.state.articles);
});
});
}

setState Callback

The secret trick here is that setState accepts a second parameter which is a callback that will be executed after the state is updated. You could place all your following logic inside that statement.

this.setState({ dogs: 350 }, () => { console.log('The state has been updated.') })
Fig 1.X — Cite: https://www.12manage.com/description_fifo.html
componentDidMount() {
fetch('http://example.com/rss.xml')
.then((response) => response.text())
.then((response) => parseString(response, (err, result) =>
this.setState({
articles: JSON.stringify(result.rss.channel[0].item),
}, () => {
console.log('RAW:', result.rss.channel[0].item)
console.log('THIS:', this.state.articles)
}));
);
}
// before
console.log('THIS: ' + this.state.articles);
// after
console.log('THIS:', this.state.articles);

Asynchronous Concurrency

Read this definition for console.log() and multiple parameters.

Fig 1.0 — Cite: http://msl-network.readthedocs.io/en/latest/concurrency_async.html

Functional setState

While we are talking about setState, I should mention also that you can pass a function to it. Imagine that the second parameter callback is your method of looking into the future after setState. The opposite of that is looking into the past, which is where the functional setState comes in handy by giving you closure around the previous unit of time. The previous state also happens to be the current state of whatever you are updating.

Fig 1.1 — Cite: https://shift.infinite.red/react-conf-2017-day-1-a-review-7cbf4ec3af3c
this.setState((prevState) => {
// hello I like cats.gif
// we could run some fascinating code here
// as long as we return an object
console.log('rad')
return {
articles: [ ...prevState.articles, { new: 1, article: true }],
}
})
this.setState(prevState => ({
articles: [ ...prevState.articles, { new: 1, article: true }],
})

React’s way of taming JavaScript is to promote data to flow unidirectionally, immutably, and deterministic.

Reactive Programming

It makes things easier to reason about if everything is flowing one way. That only works if you require immutability and prefer a deterministic system. It means most functions are written declaratively, so they declare what the state looks like at the start of a function, do stuff, then declare what the state is at the end of the function.

Fig !.2 — Cite: https://dzone.com/articles/5-things-to-know-about-reactive-programming
Fig 1.3 — Cite: http://micro-os-plus.github.io/user-manual/semaphores/
Fig 1.4 — Transaction commit or rollback
Fig 1.5 — DAG with Transitive Closure

TLDR

It’s very important what you are doing before, during, and after this.setState(). It's a special function, a class method on the Component Class. I hope I have helped us understand a couple of its secrets today.

componentDidMount() {
fetch('http://example.com/rss.xml')
.then((response) => response.text())
.then((response) => parseString(response, (err, res) =>
this.setState({
articles: JSON.stringify(res.rss.channel[0].item),
hasFetchedStuff: true,
})
));
}
componentDidUpdate() {
if (this.state.hasFetchedStuff) {
this.triggerSomething()
}
}
  • when the mount event occurs, do this
  • when the data is acquired, do this

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adam Mackintosh

Adam Mackintosh

I prefer to work near ES6+, node.js, microservices, Neo4j, React, React Native; I compose functions and avoid classes unless private state is desired.