Why is a Component Re-Rendering done when changing the value of the props sent to child Component (react js)?

Question

I am having a problem understanding Rerender in React I read in the documentation that the Renderer occurs when there is a change in the state I also read in this article that ( https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/ ) when I pass props to another component and then receive the rubes with a ballistic outside the useEffect, when a change occurs in the value of the props, the change will not be reflected in the component that receives the props. But when the value of the props is received in a normal variable when there is a change in the value of the props, it performs a rerender and the change is reflected immediately See this example << https://codesandbox.io/s/blissful-chatelet-xxb34?file=/src/App.js >> Please clear this up for me, thank you

Answer 1

When will a Component Re-render

1. When the value of any of its state changes (Class or Functional Component)
2. When the value of the props that is send by Parent changes (Class of Functional Componnent).

So, this is the basic concept of re-render!

Exceptions

You might decide that if the props that are being sent by parent, are NOT used in your component, in that case you might decide to make your component as PURE COMPONENT , and only in that case the changes in props won't rerender your child-component!

Also Read: Why React's PureComponent is recommended to have all its children "pure"