Code comparision in streamlit

Currently, I am working on the code converter application in Streamlit, in that I am integrating the code mirror(React) into the Streamlit application. I am using the deployed react URL of the code mirror into the streamlit by using streamlit.components.v1.
The issue I am facing is that whenever I click on the convert button It converts the user-provided code and subsequently displays that data in the CodeMirror. However, it does not provide the data promptly even after loading once. The CodeMirror function keeps running multiple times, causing the application to load repeatedly before delivering a stable result.

can you please provide me the solution for stopping the rerun issue or suggest any other method for comparing the source and target code in Streamlit which is similar to code mirror?
Below I have provided the codemirror function.

Streamlit version: 1.28.2
Python version: 3.11.4

code mirror function:

_RELEASE = False
def st_codemirror_diff(left, right,opts, key=None):
if not _RELEASE:
_component_func = components.declare_component(
โ€œst_codemirror_diffโ€,
url=โ€œ(The deployed URL for the CodeMirror React)โ€,
)
print(โ€œdataโ€)
else:
parent_dir = os.path.dirname(os.path.abspath(file))
build_dir = os.path.join(parent_dir, โ€œfrontend/buildโ€)
_component_func = components.declare_component(
โ€œst_codemirror_diffโ€, path=build_dir
)
component_value = _component_func(left=left, right=right,opts=opts, key=key, default=0)
return component_value

Thank you.

Hi @Pracharitha

The app rerun issue can be resolved by implementing Session State in your app. There is ample code snippet examples in the Docs page listed below:

Hope these help!