When Does a Component Re-render in React?

In React, a component may re-render in the following cases:

1. When the Component’s State or Props Change
   React automatically re-renders a component whenever its state or props change. This ensures that the component reflects the latest data.

2. When the Parent Component Re-renders
   Even if the state or props of a child component remain unchanged, the child will re-render if its parent re-renders. This is the default behavior in React.

Tip: To optimize re-renders, you can use React.memo for functional components or shouldComponentUpdate for class components to prevent unnecessary re-renders when props haven't changed.

Credits: John Smilga's course

Comments

[Mohamed Idris]

React.memo()