STEP 1
// initially all the component will mount no matter
they have prop or memo() if they are caled from
jsx or returned from anywhere
so the intial rendering pattern will be
'App'
'A'
'B'
'C'
'D'
STEP 2
as after mounting useEffect will run an as useEffect have dependecy list empty it will run only one time
as state changed in useEffect all the log in component will be logged ,
if jsx have function like handleClick or any other their instance will re
initailize
// so here we have console.log in component body
2nd redner o/p
'App'
as the changed state is passed in the component A.
A component a will be called/ rendered even if it have React.memo or not
//imp
so memo will only render the function if the props passed in it has been changed
then only it will called the component , if props passed in it doesn't change or no props has been passed
memo() will not allow component to render.
That's why component B is not rendered and C ( as c is called/returned from B).
so react get back after logging A
and got to D and
logged D.
2nd render will be
'App'
'A'
'D'
final output :
'App'
'A'
'B'
'C'
'D'
'App'
'A'
'D'
// useMemo is a react hook which is used to memoize the expensive function output (react stored it in memory) so when state change or any re rendering happens in component
that expensive function don't need to call itself again it can give output from previous output it saved in memory.

Learn memo(),  useMemo()

What does the code snippet to the right output by console.log?…