What's the overhead of Composite Components?

[AndreiCalazans]

From the Render, Commit, and Mount post.

In the example above, is a React Element. React recursively reduces this React Element to a terminal React Host Component by invoking it (or its render method if implemented with a JavaScript class) until every React Element cannot be reduced any further. Now you have a React Element Tree of React Host Components.

...

This happens only for React Host Components, not for React Composite Components. In the example above, the leads to the creation of a ViewShadowNode object, and the leads to the creation of a TextShadowNode object. Notably, there is never a React Shadow Node that directly represents .

This might be a React Core question, not a RN Core one.

Does the above mean there is no overhead of having many Composite Components like ContextProviders? Or, is there any overhead for having many Composite Components?

[ShikaSD]

If I understand the question correctly, the answer is that there's no overhead.

Native ShadowNode is created only in places native components are required (e.g. if some function returns <View /> or text node), with all React abstractions handled by JS side of the renderer

[AndreiCalazans]

@ShikaSD I understood that as well for the mapping of React Elements to React Host components. My questions is at the React layer. Similarly to how HOC would cause performance degradations by increasing the React tree, could I assume the same for any Composite Component? (I know I could just measure but I am trying to see if this has been concluded internally as well)

[sammy-SC]

Hey @AndreiCalazans,

interesting question! I'll share my understanding of composite components.

Context API is special. It is not a composite component. Context does has performance implications. Specifically for updates as it becomes more laborious to identify changes in the fiber tree. Component is no longer just a function of state and props, but context is added to the mix. Someone with React knowledge is better suited to answer this in depth but I thought I would share my understanding.

Composite component only really adds extra function call. As React executes render function, it will see return value of the render function is another function that it needs to execute. I would say the overhead is whatever the cost of a function call is in JavaScript and it negligible for most purposes.
Avoiding composite components, even for performance benefit, would go against one of the core ideas behind React. This would be counter productive and lead to unintuitive code.

If you do end up running any benchmarks, I would like to take a look!
Please let me know if this makes sense or you have any further questions.

Thank you.