From 0755480b527ef171d40d469d2439f3025492afcb Mon Sep 17 00:00:00 2001
From: raethlein <benjamin.raethlein@gmail.com>
Date: Thu, 5 Dec 2024 00:35:10 +0100
Subject: [PATCH] Add comment and remove unnecessary deps

---
 .../frontend-react/src/MyComponent.tsx                 | 10 ++++++----
 template/my_component/frontend/src/MyComponent.tsx     | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx b/cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx
index 44a5f8f6..4f73995e 100644
--- a/cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx	
+++ b/cookiecutter/{{ cookiecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx	
@@ -28,24 +28,26 @@ function MyComponent({ args, disabled, theme }: ComponentProps): ReactElement {
     Streamlit.setComponentValue(numClicks)
   }, [numClicks])
 
+  // setFrameHeight should be called on first render and evertime the size might change (e.g. due to a DOM update).
+  // Adding the style and theme here since they might effect the visual size of the component.
   useEffect(() => {
     Streamlit.setFrameHeight()
-  }, [style, numClicks])
+  }, [style, theme])
 
   /** Click handler for our "Click Me!" button. */
   const onClicked = useCallback((): void => {
     setNumClicks((prevNumClicks) => prevNumClicks + 1)
-  }, [setNumClicks])
+  }, [])
 
   /** Focus handler for our "Click Me!" button. */
   const onFocus = useCallback((): void => {
     setIsFocused(true)
-  }, [setIsFocused])
+  }, [])
 
   /** Blur handler for our "Click Me!" button. */
   const onBlur = useCallback((): void => {
     setIsFocused(false)
-  }, [setIsFocused])
+  }, [])
 
   // Show a button and some text.
   // When the button is clicked, we'll increment our "numClicks" state
diff --git a/template/my_component/frontend/src/MyComponent.tsx b/template/my_component/frontend/src/MyComponent.tsx
index 44a5f8f6..4f73995e 100644
--- a/template/my_component/frontend/src/MyComponent.tsx
+++ b/template/my_component/frontend/src/MyComponent.tsx
@@ -28,24 +28,26 @@ function MyComponent({ args, disabled, theme }: ComponentProps): ReactElement {
     Streamlit.setComponentValue(numClicks)
   }, [numClicks])
 
+  // setFrameHeight should be called on first render and evertime the size might change (e.g. due to a DOM update).
+  // Adding the style and theme here since they might effect the visual size of the component.
   useEffect(() => {
     Streamlit.setFrameHeight()
-  }, [style, numClicks])
+  }, [style, theme])
 
   /** Click handler for our "Click Me!" button. */
   const onClicked = useCallback((): void => {
     setNumClicks((prevNumClicks) => prevNumClicks + 1)
-  }, [setNumClicks])
+  }, [])
 
   /** Focus handler for our "Click Me!" button. */
   const onFocus = useCallback((): void => {
     setIsFocused(true)
-  }, [setIsFocused])
+  }, [])
 
   /** Blur handler for our "Click Me!" button. */
   const onBlur = useCallback((): void => {
     setIsFocused(false)
-  }, [setIsFocused])
+  }, [])
 
   // Show a button and some text.
   // When the button is clicked, we'll increment our "numClicks" state