Normal child, props value is: David

Memo child, props value is: David

How to use it

1

Step 1: Open console to see the rendering logs.

2

Step 2: Click either blue or green button to change the state of the parent component.

3

Step 3: You will find that the normal child component is re-rendered every time the parent component is re-rendered, while the memo child component only re-renders when its props 'name' value changes.

Reference Links