7.3: Update Methods

The update phase is where a Component spends most of its time. Here we get data updates, act on user or system actions, and provide the overall experience for our application. There are three ways to start update: 1. when the props change 2. when the state changes 3. by forcibly calling forceUpdate().

The changes that are made determine how the rest of the update phase is affected.

Methods

shouldComponentUpdate()

Use shouldComponentUpdate() to let React know if it shouldn't re-render a component. The default behavior in React for rendering, is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior. You can use this method to prevent unnecessary re-renders, when a component’s output is not affected by the current change in state or props. This method is not often used, unless you know for specific instances where you would not want a re-render on. React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

componentDidUpdate()

componentDidUpdate() is invoked immediately after updating occurs, think of it as similar to componentDidMount(), but for the update phase. This method is not called for the initial render. The most common uses of componentDidUpdate() is managing 3rd party libraries to update the information, or doing network requests as long as you compare the current props to previous props to determine if it's necessary to do one.

Unmount Methods