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);
});
});
}

Bonus Note: Notice how it is shown in componentDidMount and not componentWillMount. This is because network calls should be made here. If you make a network call in componentWillMount, there is a chance you could receive the data before the component is fully mounted. At which point this.setState() wouldn’t work because there is no component on which to set.

this.setState({ dogs: 350 }, () => { console.log('The state has been updated.') })

The second parameter to this.setState() is an optional callback function that will be executed once setState is completed and the component is re-rendered. Generally we recommend using componentDidUpdate() for such logic instead.

Cite: https://reactjs.org/docs/react-component.html

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);

[Console.log accepts: a] list of JavaScript objects to output. The string representations of each of these objects are appended together in the order listed and output. Please be warned that if you log objects in the latest versions of Chrome and Firefox what you get logged on the console is a reference to the object, which is not necessarily the ‘value’ of the object at the moment in time you call console.log(), but it is the value of the object at the moment you click it open.

Cite: https://developer.mozilla.org/en-US/docs/Web/API/Console/log

Fig 1.0 — Cite: http://msl-network.readthedocs.io/en/latest/concurrency_async.html
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.

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

Adding the red edges to the blue directed acyclic graph produces another DAG, the transitive closure of the blue graph. For each red or blue edge uv, v is reachable from u: there exists a blue path starting at u and ending at v.

Cite: https://en.wikipedia.org/wiki/Directed_acyclic_graph

TLDR

Generally we recommend using componentDidUpdate() for such logic instead.

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()
}
}

--

--

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