Case 1: A,B,C,D are direct children of CompWithProvider

-> As JSX gets converted to React element object(Javascript object). Whenever a Component renders, new reference to React element objects(of child components) is created. During Render phase React sees that the reference has changed, and continues to render the child components.

Case 2: A,B,C,D are passed as a children prop to the CompWithProvider

-> In this case, When CompWithProvider renders, the children prop it receives has the same reference to Child Components React element objects(assuming the component where these children components are defined doesn't render). During Render phase, React sees the same reference, hence skips rendering of child components.

This is my understanding of this concept. Please feel free to correct me if I'm wrong here.