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)

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

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)

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

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