𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴

𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗥𝗲𝗻𝗱𝗲𝗿𝗶𝗻𝗴

Rendering turns your React components into elements. The browser shows these elements on the screen. React re-renders a component when its state or props change.

Two types of rendering exist:

1. Initial Rendering This happens when your app loads. React builds the component tree and puts it on the page.

2. Re-Rendering This happens when data changes. A component re-renders if:

• State changes
• Props change
• A parent component re-renders
• Context values change

The Virtual DOM improves speed. React follows these steps:

• State changes.
• React makes a new Virtual DOM.
• React compares the new one to the old one.
• React updates only the changed parts in the real DOM.

This comparison process is called Reconciliation. It prevents React from rebuilding your entire page. It only updates what is different.

Avoid unnecessary re-renders to keep your app fast. Use these three tools:

• React.memo: This stops a child component from re-rendering unless its props change.
• useMemo: This stores a calculated value so React does not redo heavy math every time.
• useCallback: This keeps a function from being recreated on every render.

The rendering lifecycle follows this path:

• Component mounts.
• Initial render.
• State or props change.
• Re-render occurs.
• Virtual DOM comparison.
• DOM updates.

Source: https://dev.to/aj_arul/understanding-react-rendering-242p