Add comment and remove unnecessary deps

streamlit · Dec 4, 2024 · 0755480 · 0755480
1 parent 6fe2db0
commit 0755480
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/...ecutter.package_name }}/{{ cookiecutter.import_name }}/frontend-react/src/MyComponent.tsx b/...ecutter.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
@@ -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