Now when we talk about The Virtual DOM we have to think about the background processes maitained by the react js
Every time when some change is there or some instruction is evaluated that instruct the virtual dom to make some changes in the actual dom then all the changed components are affected
The changed componets causes their children componets to affect by default
Problem
It is fine when we have 20-30 components , but when we have a large no of components then it can be a issue that it may create some performance drop
So to handle with this problem we use React.memo() hook
It Will only reevaluate the element when there will be any changes in the props
// to apply the react memo hook just apply when exporting the function const Hello =()=>{ } export default React.memo(Hello ) // now this will reevaluted if there is any virtual dom diffing
Virtual DOM diffing :
Now this means the change between the previous state and the current state of the dom
if The Virtual diffing happens then the components will be reevaluated by React js
Problem
1 .Now if you are using the react.memo() for a single element it is of no use because a single element not much effect the performance but when you have a chain of component then you can use it on the parent component and the element itself and it’s child will not be reevaluated untill and unless there will be any changes in the props
2. Now suppose you are giving any function in the custom components and the props are not changing but then also the elements gets evaluated by (react after using react.memo() also) because the function which you are passing getting evaluated every time and has pointed to a diffrent location everytime so the diff always return true for the function , array , object etc ….
