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

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

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

Functional setState

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

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

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Java -LOOP

JavaScript Arrays: Explain Like I’m Five

An error occurred while signing: SignTool.exe not found

State and Props in React

How to use Ajax properly

How to Create a Clock Component with Svelte

Algorithms Explained Fast and Clear (No BS)

Node.js Module system Part 5( note-taking app)

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.

More from Medium

SETTING UP A REACT-NATIVE DESKTOP APP IN 5 MINUTES…

Configuring Absolute Imports in React and React Native with Typescript

Run javaScript code when UI thread gets updated — Worklets

Using React Native TypeScript and Redux