[Advanced React] Intro to rerender

[reboottime]

Intro to re-render

This article is part of an advanced React series tutorials.

Major content

• How to make explanation: Problem - Fundamental -> Solution
• The problem, the app reacts too slow on clicking the button to render a modal
• The fundamental: state change triggers re-rendering, and the rendering tree
• The solution: move modal related logic down to ModalWithButton

[reboottime]

The problem

In the following UI, clicking on the Click Me button takes forever to render the modal

• Code structure

[reboottime]

The fundamental

How react adds, updates and removes component on the screen.

• First time mounting

• unmounting

• rendering

• re-rendering tree

Be careful with hooks

• Each place where you use hooks will create a separate state instance.
• Hooks hide the internal logic, so you may not have noticed it in places where you use it

[reboottime]

Solution

Root cause: So the problem happens because the heavier components take a lot of time on re rendering, thus the modal shows slow to the screen

Solution: Minimize the influence scope of rerendering

Solution So the problem happens because the heavier components take a lot of time on re rendering, thus the modal shows slow to the screen