Brief description of what’s going on here:

API.tweet() is called with POST data containing message on a click event.

The payload will be sent back and received in (event) => { … } callback.

If returned payload data should cause props change, trees will be DIFFed.

If both virtual DOM trees are different most recent one is sent to the browser.

Then this new virtual DOM becomes the old one & we await for a future one.

React Components

A React component is nothing more than a JavaScript object. React creates its own virtual DOM which is a representation of your entire UI structure in the form of a binary tree. It keeps this virtual DOM tree in memory, adding, updating, and deleting various components multiple times before it is finally rendered in the actual browser DOM and UI is physically updated in browser.

Don’t use render() for anything other than rendering the UI. If you need to change state or props, you must use React’s built-in lifecycle methods.

render() should remain a pure function at all times

The render() function updates virtual DOM components. If this new virtual DOM tree is different from the previously rendered virtual DOM tree, React will also update the actual browser’s DOM. It is not your job to update browser’s DOM directly anywhere — especially not from render() function.