State and Lifecycle

setState()

The primary way that you make UI updates to your React applications is through a call to the setState() function. This function will perform a shallow merge between the new state that you provide and the previous state, and will trigger a re-render of your component and all decedents.

Parameters

1. updater: It can be an object with a number of key-value pairs that should be merged into the state or a function that returns such an object.

2. callback (optional): a function which will be executed after setState() has been executed successfully. Due to the fact that calls to setState() are not guaranteed by React to be atomic, this can sometimes be useful if you want to perform some action after you are positive that setState() has been executed successfully.

Lifecycle Methods

• The componentDidMount() method runs after the component output has been rendered to the DOM.

• componentWillMount is executed before rendering, on both the server and the client side.

• componentDidMount is executed after the first render only on the client side. This is where AJAX requests and DOM or state updates should occur.

Detecting Changes

• Detecting changes in mutable objects is difficult because they are modified directly. This detection requires the mutable object to be compared to previous copies of itself and the entire object tree to be traversed.

• Detecting changes in immutable objects is considerably easier. If the immutable object that is being referenced is different than the previous one, then the object has changed. Immutable data can easily determine if changes have been made, which helps to determine when a component requires re-rendering.