fix: restore duplicate Tabs rendering to fix hydration issue (facebook#5652)

slorber · web-flow · commit e1b4da04fe88 · 2021-10-07T12:40:19.000+02:00
* restore duplicate Tabs rendering to fix hydration issue

* comment
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, {useState, cloneElement, Children, ReactElement} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 import useUserPreferencesContext from '@theme/hooks/useUserPreferencesContext';
 import type {Props} from '@theme/Tabs';
 import type {Props as TabItemProps} from '@theme/TabItem';
@@ -21,7 +22,7 @@ function isInViewport(element: HTMLElement): boolean {
   return top >= 0 && right <= innerWidth && bottom <= innerHeight && left >= 0;
 }
 
-function Tabs(props: Props): JSX.Element {
+function TabsComponent(props: Props): JSX.Element {
   const {
     lazy,
     block,
@@ -163,4 +164,14 @@ function Tabs(props: Props): JSX.Element {
   );
 }
 
-export default Tabs;
+export default function Tabs(props: Props): JSX.Element {
+  const isBrowser = useIsBrowser();
+  return (
+    <TabsComponent
+      // Remount tabs after hydration
+      // Temporary fix for https://github.com/facebook/docusaurus/issues/5653
+      key={String(isBrowser)}
+      {...props}
+    />
+  );
+}
diff --git a/website/_dogfooding/_pages tests/tabs-tests.mdx b/website/_dogfooding/_pages tests/tabs-tests.mdx
@@ -0,0 +1,22 @@
+# Tabs tests
+
+```mdx-code-block
+import BrowserWindow from '@site/src/components/BrowserWindow';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+```
+
+## Tabs with dynamic default value
+
+This can cause [bugs](https://github.com/facebook/react-native-website/issues/2771) when default value is different between SSR and client:
+
+```mdx-code-block
+export const isMacOS = typeof window !== 'undefined' && navigator.platform.startsWith('Mac');
+
+<BrowserWindow>
+  <Tabs defaultValue={isMacOS ? "ios" : "android"}>
+    <TabItem value="android" label="Android">Android content</TabItem>
+    <TabItem value="ios" label="iOS">iOS content</TabItem>
+  </Tabs>
+</BrowserWindow>
+```
