From e1b4da04fe88767d52f21bf1f043af308e7bfbd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= <slorber@users.noreply.github.com>
Date: Thu, 7 Oct 2021 12:40:19 +0200
Subject: [PATCH] fix: restore duplicate Tabs rendering to fix hydration issue
 (#5652)

* restore duplicate Tabs rendering to fix hydration issue

* comment
---
 .../src/theme/Tabs/index.tsx                  | 15 +++++++++++--
 .../_dogfooding/_pages tests/tabs-tests.mdx   | 22 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 website/_dogfooding/_pages tests/tabs-tests.mdx

diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx
index 4c56b2e9a7..13ea03591d 100644
--- 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
new file mode 100644
index 0000000000..af7dd77e12
--- /dev/null
+++ 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>
+```