I am reviewing the implementation for a client ,in which they have 500 hidden component .
one example of why the component count for hidden component is high.
Headline component: This component is hidden .(/apps/headline)
teaser 1: here we are including headline component which is under teaser component (/apps/teaser1/headline1)
teaser1/headline1(/apps/teaser/headline1) :This component inherits from (/apps/headline) but has extra properties related with css and js as properties on this node .
teaser2:here we are including headline component which is under teaser component (/apps/teaser2/headline2)
teaser2/headline2(/apps/teaser2/headline2) :This component inherits from (/apps/headline) but has extra properties related with css and js as properties on this node which are used while we are displaying the code.
This is one way of implementation but you can remove these extra headline2,headline1 component by using cq:template and specifying these css and js property.
Based on my experience we used cq:component node only when we have to use reuse the component in other component or use sling inheritance ,if the component are not reused best way is to using include script or synthetic resource.
what would be the impact of using such high number of hidden component and is it in align with adobe best practice?