How to measure processing time, and bottlenecks on (pattern-matching) callbacks?

Hey guys, hope you’re doing well!

I’m working on a web app that has an advanced accordion style with some effects that I’m using pattern match callbacks on the engine to create the effects you can see on the gif below:

The problem starts when I try to add more categories and subcategories… So it starts to work very slow;

I’m trying to use 7 different categories with 30± subcategories in each category.

I thought the problem was about the loops to create the style and other information but after exploring the callback graph I did note that maybe other parts are being affected by this collapsed part;

I have isolated the component and created an application to test it:

As we can see, it takes some time to run the component, but on the callback graph it says that it was very fast;

So, I would like to know what’s the best way to understand what’s happening on my callbacks to detect where is my bottleneck; I suspect that it’s not directly on the loops and so on, but it’s happening because it takes some time until rendering the modifications to the user.

Any help or reference would be very welcome.

If you need any other clarification please let me know.


Hm, could you try using Chrome’s built-in performance tools and share a screenshot of the results? It’s possible this is within Dash’s JS rather than in your code. Chrome’s performance / dev tools would probably tell us

Hi @chriddyp, thanks for your answer man;

I do not have experience with Chrome’s performance/dev tools yet, so let me know if I don’t pass the correct information to you

1st part:

2nd part:

3rd part:

I have created some checkpoints on my script and seems that my click is being recognized very fast, but it takes some time to propagate the info between the callbacks;

Please, let me know if I provided you the correct info otherwise, I can send it again.

Any light about how to solve it will be very welcome bro;

Last thing, If needed, I can provide you the component code to be easier to you reproduce it on your side and understand what’s going wrong;

Thank you very much

Hey @chriddyp sorry, the above information was the performance on Lighthouse dev tools option
Below is the google performance report;

If I do comment the subcategory id as shown below:

The app performance will work well with a good performance

Did you try running the Dash app without the debug flag? Is performance similar?

Hey @Emil, thanks for your message!

I did a test it with the debug=False and seems like it increased the bad performance in some milliseconds


Also, on the accordion, it seems to be slightly faster than with debug=True, but still not satisfactory