DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Aaron Gong
Aaron Gong

Posted on

Caveat

There could be a potential web performance issue

If you have 3 of the same custom components in your app, and the custom component has huge JS library.

  st.subheader("Component Test")
  rv = my_component(name="NameViteVanilla", key="K1", config=config, nodes=nodes, edges=edges)
  my_component(name="NameViteVanilla", key="K2", config=config, nodes=nodes, edges=edges)
  my_component(name="NameViteVanilla", key="K3", config=config, nodes=nodes, edges=edges)
Enter fullscreen mode Exit fullscreen mode

You could end up loading the library 3 times (see image below). Ouch!

Image description


Seems like the multiple reload of JS code also happens if streamlit-aggrid is used.

Code snippet below displaying 3 grids

grid_data1 = AgGrid(titanic_data, key="ag1", gridOptions=gridOptions)
grid_data2 = AgGrid(titanic_data, key="ag2", gridOptions=gridOptions)
grid_data3 = AgGrid(titanic_data, key="ag3", gridOptions=gridOptions)
Enter fullscreen mode Exit fullscreen mode

Snapshot of browser network calls, showing the aggrid related JS file being called three times...

Image description

I could be doing something wrong here though. So this definitely needs some investigation...

Top comments (0)

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: