Components keep refreshing/remounting when in a column

Summary

With or without a key, a component in a column will eventually refresh/remount, sometimes lock itself into a refresh loop. Not sure but seems to depend on the browser (Chrome/Edge stop refreshing at some point but if you interact with the component it goes off again. Firefox stays in loop forever).

Steps to reproduce

Using drawable canvas

Canvas won’t stop remounting.

https://github.com/andfanilo/streamlit-drawable-canvas/issues/23

import streamlit as st
from streamlit_drawable_canvas import st_canvas

col1, col2 = st.beta_columns(2)

with col1:
    canvas_image = st_canvas(
        fill_color = "rgba(255, 165, 0, 0.3)", 
        stroke_width = 2,
        stroke_color = '#e00',
        drawing_mode = "line",
        key = "canvas",
    )

with col2:
    options = ['U','D','R', 'L']
    lines = [st.selectbox('Select', options, key=x) for x in range(4)]

Using component template

Component will stop at state 1.

if not _RELEASE:
    import streamlit as st
    col1, col2 = st.beta_columns(2)

    with col1:
        st.subheader("Component with constant args")
        num_clicks = my_component("World")
        st.markdown("You've clicked %s times!" % int(num_clicks))

    with col2:
        st.subheader("Component with variable args")
        name_input = st.text_input("Enter a name", value="Streamlit")
        num_clicks = my_component(name_input, key="foo")
        st.markdown("You've clicked %s times!" % int(num_clicks))

Expected behavior:

If there’s a key, no remount. If there’s no key, as usual.

Actual behavior:

Is this a regression?

Using the drawable canvas example, I went back to the beta builds @akrolsmir ✔️ Works on streamlit-0.65.24-py2.py3-none-any.whl 🟥 Doesn’t work on streamlit-0.66.22-py2.py3-none-any.whl

[andfanilo]

Ah, so I’m not sure I understood everything without seeing your code 😃 and I have not tested the following hypothesis, but I fear if you write useEffect(() => Streamlit.setComponentValue(42)) then anytime the component renders, it will call the useEffect which will call Streamlit.setComponentValue and that would run a rerender of the component (because Streamlit.setComponentValue reruns the Streamlit script and rerender all components on the page). If it rerenders then it’s going to run the useEffect again, which will retrigger a rerender and then you’re going into an infinite loop of refreshing.

If you place the setComponentValue in handleSelected then pass it to onSelected={handleSelected} in Plotly, then it will only be run when interacting with Plotly, not whenever the component rerenders, so you don’t get the infinite refresh.

Hope I got it on point 😃

Fanilo

[andfanilo]

First test on Drawable Canvas on streamlit-nightly LGTM !