Can you use AIO components in an AIO component?

Hey everyone, I was just wondering whether I might run into any issues trying to create a bunch of modular AIO components and then using those components to create a hierarchical structure to AIO components in my application? i.e. an AIO component for writing and saving complex Excel files, input groups, etc., then grouping those in various ways into preset sidebars, then using those sidebars in creating default page layouts, if that makes sense. I basically need to abstract as much about the process of creating applications out from the end user and AIO components seemed like the best way to create intelligent defaults while still having a bit of flexibility to override your own attributes. Thank you! :slight_smile:

In principle, I guess you could. But you might want to keep in mind performance implications of AIO components as compared to implementing logic in React directly. If your AIO component(s) only contains a few Dash components and callbacks (and you are only instantiating a few instances of the AIO component), this performance impact probably won’t be a concern. However, if the number of components/callbacks is large, it will generally be more performant to implement the abstraction (i.e. what the AIO component does) in React instead. When you nest AIO components, the concern of course grows with n^m where n is number of components/callbacks and m is the level of nesting.

I have attempted this and did not find myself successful, though that doesn’t mean you won’t be successful. I found the primary issue revolved around trying to have pattern matching callbacks nested within other pattern matching callback.

Hm got it - I personally don’t have a whole lot of React experience so I’m not sure how well that will go. I’ll stick to keeping AIO components for the minimal chunks and using templated layouts to assemble them together if someone wants to create an application. Thanks for the help!

1 Like