View/root/component hierarchy

This is more of a general question for understanding the ReactJS underline usage. If I create a view called Test, right awa creates a root and in that root, I put a simple button. From the ReactJS standpoint, is ignition creating 3 components, one for the View, one for the root, and one for the button?

I'm asking this question to figure out the best practice to pass data down to the component. From the view.PARAMS.backgroundColor, then root.CUSTOM.backgroundColor bind to view.PARAMS.backgroundColor, should I create button.CUSTOM.backgroundColor and bind those to root.CUSTOM.backgroundColor?

What about if I need to write some condition to set a default value? Where should that logic live, in the root, in the view/root/button, or all the way to the view.root.button.style.backgroundColor?

If ignition is creating a different component for each layer and passing props or using the context API.... Are there performance implications on how this is setup?