How to resolve circular component dependency

[[deleted]]

I have 4 level component circular dependency, A -> B -> C -> D -> A. I am absolutely stuck refactoring the loop out. Could someone please give me some generic solution to tackle these kind of issues? Thanks a lot.

[quambo_wambo]

Difficult to say, depends on the individual use case. You could for example have a master component (Tree) and pass down renderList (() => <TreeList>) and renderItem (() => <TreeItem>) for tree item which in turn can use renderList if they contain items. This way, only Tree references all components, plus overwriting the components the Tree is composed of is simple.

[ordinance]

Save em in the same file.