diff --git a/optuna_dashboard/static/components/HyperparameterImportances.tsx b/optuna_dashboard/static/components/HyperparameterImportances.tsx
index f5969345..1af1c1ea 100644
--- a/optuna_dashboard/static/components/HyperparameterImportances.tsx
+++ b/optuna_dashboard/static/components/HyperparameterImportances.tsx
@@ -26,15 +26,15 @@ const distributionColors = {
 }
 
 export const HyperparameterImportances: FC<{
-  studyId: number
-}> = ({ studyId }) => {
+  studyId: number, numOfTrials: number
+}> = ({ studyId, numOfTrials = 0 }) => {
   useEffect(() => {
     async function fetchAndPlotParamImportances(studyId: number) {
       const paramsImportanceData = await getParamImportances(studyId)
       plotParamImportances(paramsImportanceData)
     }
     fetchAndPlotParamImportances(studyId)
-  })
+  }, [numOfTrials])
   return <div id={plotDomId} />
 }
 
diff --git a/optuna_dashboard/static/components/StudyDetail.tsx b/optuna_dashboard/static/components/StudyDetail.tsx
index 56e84507..154a6bf0 100644
--- a/optuna_dashboard/static/components/StudyDetail.tsx
+++ b/optuna_dashboard/static/components/StudyDetail.tsx
@@ -202,7 +202,7 @@ export const StudyDetail: FC = () => {
               <Grid item xs={6}>
                 <Card className={classes.card}>
                   <CardContent>
-                    <HyperparameterImportances studyId={studyIdNumber} />
+                    <HyperparameterImportances studyId={studyIdNumber} numOfTrials={trials.length}/>
                   </CardContent>
                 </Card>
               </Grid>