Manually updating DOM on ComponentDidUpdate using reference
Hello.
In this video we have a look at a cool code example. The code uses snapshot and reference to manually update the DOM inside ComponentDidUpdate lifecycle.
As you may well know, it is inside ComponentDidUpdate that we invoke side effects. A common side effects are: fetching data from server, or manually updating the DOM. In this example, we are manually updating the DOM after rendering.
The code dealt here renders size and background of a div element which is stylized as a box. There are three buttons to change the boxSize state: small, normal, and big. After the first render, a snapshot is taken to calculate a boolean overrideBoxColor, which is set to true only if offset height of the div is greater than 120.
When the user clicks on the same third button again, this time overrideBoxColor is populated and set to true, and this triggers repainting of the box to be of black background.
It is important to note that taking of the snapshot and execution of ComponentDidUpdate are acted upon only after the first update, not on the first rendering. That is why when you click on the 'big' button for the first time, background color stays blue. Only when you click on the button the second or more times does the background color turns to black.
You can find the complete code here:
Refer: https://pastebin.com/M6hReEvM