Merge pull request #210 from storybookjs/fix-renderers-dropdown

Fix infinite loop list of renderers
storybookjs · Jul 18, 2024 · 00c2b02 · 00c2b02
2 parents 68857c7 + 775003b
commit 00c2b02
Showing 1 changed file with 11 additions and 9 deletions.
diff --git a/apps/frontpage/components/docs/renderers/index.tsx b/apps/frontpage/components/docs/renderers/index.tsx
@@ -21,15 +21,6 @@ export const Renderers: FC = () => {
   const [lastRenderer, setLastRenderer] = useState<Renderer>(renderers[3]);
 
   useEffect(() => {
-    // On mobile we only show the first two renderers
-    if (isMobile) {
-      setFirstList(renderers.slice(0, 2));
-      setLastRenderer(renderers[2]);
-    } else {
-      setFirstList(renderers.slice(0, 3));
-      setLastRenderer(renderers[3]);
-    }
-
     const isInFirstList = firstList.some(
       (renderer) => renderer.id === activeRenderer,
     );
@@ -43,6 +34,17 @@ export const Renderers: FC = () => {
     }
   }, [isMobile, activeRenderer, firstList]);
 
+  useEffect(() => {
+    // On mobile we only show the first two renderers
+    if (isMobile) {
+      setFirstList(renderers.slice(0, 2));
+      setLastRenderer(renderers[2]);
+    } else {
+      setFirstList(renderers.slice(0, 3));
+      setLastRenderer(renderers[3]);
+    }
+  }, [isMobile, activeRenderer]);
+
   const restRenderers = renderers.filter((r) => {
     return !firstList.includes(r) && r !== lastRenderer;
   });