There seems to be nothing wrong here.
Let's follow step by step:
- The initial state is "hello". Then you click and set it to "hi". (this was the first click.) Parent re-renders as the setState is called, and updates the state. Child also re-renders because the state is changed and i has a different value than before.
- You click the button a second time. This time the state is already "hi", and you are setting it to "hi" again. Therefore setState is called, parent re-renders because of the setState, but the state is not changed. So the Child Component doesn't re-render.
React listens to state changes, if the prop value didnot change, re-render is not triggered.