Initial Render and Re-Renders

Mounting or Initial Render

In a React application, the initial render is the first time that the component tree is rendered to the DOM. It happens when the application first loads, or when the root component is first rendered. This is also known as mounting the components.

Re-renders

On the other hand, re-renders happen when the component’s state (useState) or props change, and the component needs to be updated in the DOM to reflect these changes. React uses a virtual DOM to optimize the process of updating the actual DOM, so that only the necessary changes are made.

Triggering re-renders

There are a few ways that you can trigger a re-render in a React component:

1. By changing the component’s state or props.
   1. When the component’s state or props change, React will re-render the component to reflect these changes.
2. When the parent element re-renders, even if the component’s state or props have not changed.