Can you use AIO components in an AIO component?

[dash-beginner]

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!

[Emil]

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.

[raptorbrad]

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.

[jorge243]

Improving on All-in-One (AIO) components

Motivated by the conventions suggested for AIO-s, but thinking we still have a couple of weaknesses in that approach. I looked into how to make a few improvements that we felt important for our work. We wanted, in particular, an approach allowing: Nesting or “compos-ability” - being able to nest components within components, several levels down Address-ability - within callbacks, being able to access or refer to the properties of components within components, several levels down (in practi…

[dash-beginner]

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!

[E_mat]

Hi everyone!

I am facing the same issues as those raised in here or here Improving on All-in-One (AIO) components. In short: I need to make some (ideally nested) components reusable in a multi-page app. More precisely, I need to duplicate a pretty complex Form involving about 30 callbacks and relying on a small server-side database. The outputs of this form are aggregated and turn into different graphs / dynamic visualizations (5-6 more callbacks).

My questions are the following:

1. Will performance be significantly affected if using 3 instances of an AIO Form class (involving about 30 callbacks) split in 2 different pages?
2. @Emil May DashBlueprint from dash-extension be the solution?

• A. Is it possible to nest several (similar or not) DashBlueprint instances?
• B. Should I have concerns with regard to performance in the conditions described above?
• C. Is there a dedicated way to encapsulate DashBlueprint instances into a class. I was thinking of wrapping DashBlueprint instances into classes inheriting from DashProxy for instance but I am not cleary not sure about this…

3. Any tips with regard to this topic? Is React still the best solution?

Answers to any subset of questions would definitely be appreciated!

Thank you very much in advance and sorry for the length of this post!