State Management on custom components

I was thinking about state management when using custom components. I have uploaded a gist with a sample app that uses ace editor to edit, validate and download an yaml file.

The problem is that when the component key is not fixed, the compoenent reloads between page refreshs causing a bad user experience Video. With fixed keys this doesn’t happen.

This issue is not related only to ace editor, I noticed the same happen with streamlit-aggrid or any custom component that holds state.

In my projects I’m fixing the keys using a random value stored in session_state and changing this value whenever I need the compoenent to reset. One use case is when I want to clear the file uploaded in file_upload component after processing.

Have anyone faced the same situation? Any other ideas on how to manage that?

Pablo

I encountered the same problem and gave it up.
My streamlit-webrtc component defines its key argument as a required, non-optional argument.

I think it’s unavoidable with the current Streamlit mechanism which tracks the identity of each component instance by checking its arguments unless key is provided. In such cases, when the input changes, Streamlit considers the component identity has changed and re-renders the component.

1 Like

I do something similar too, but worry that caching of these random session state keys can get out of control. In effect, this would constitute a memory leak. Am I worrying for nothing?

I’m not 100% confident, but I think this implementation does not lead to memory leaks because

  • the session state key for the frontend state is not random but just hard to read and predict to avoid conflicts (streamlit-webrtc/component.py at eacf26c0bd05f5b17c0253944c5ca518a45f3066 · whitphx/streamlit-webrtc · GitHub). It is uniquely determined from the original key. So, the number of keys are fixed as 2 for each component instance.
  • these session state keys are not special, but just same as usual session state usage, so covered by Streamlit’s built-in session state management mechanism.
    • session state is bound to each session (ReportSession) and cleared when the session ends.

However, I haven’t tested it yet.

1 Like