Fix(#2941): hydration error using victory line on next js 15 (#2973)

FormidableLabs · Nov 18, 2024 · d2d5b63 · d2d5b63
1 parent 85eb529
commit d2d5b63
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/.changeset/wicked-pandas-report.md b/.changeset/wicked-pandas-report.md
@@ -0,0 +1,5 @@
+---
+"victory-core": patch
+---
+
+fix hydration error using victory line with nextjs
diff --git a/packages/victory-core/src/victory-clip-container/victory-clip-container.tsx b/packages/victory-core/src/victory-clip-container/victory-clip-container.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import defaults from "lodash/defaults";
-import isObject from "lodash/isObject";
 import uniqueId from "lodash/uniqueId";
 
 import * as Helpers from "../victory-util/helpers";
@@ -32,7 +31,14 @@ export interface VictoryClipContainerProps {
   translateY?: number;
 }
 
-export class VictoryClipContainer extends React.Component<VictoryClipContainerProps> {
+interface VictoryClipContainerState {
+  clipId?: number | string;
+}
+
+export class VictoryClipContainer extends React.Component<
+  VictoryClipContainerProps,
+  VictoryClipContainerState
+> {
   static displayName = "VictoryClipContainer";
   static role = "container";
 
@@ -46,10 +52,18 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
 
   constructor(props: VictoryClipContainerProps) {
     super(props);
-    this.clipId =
-      !isObject(props) || props.clipId === undefined
-        ? uniqueId("victory-clip-")
-        : props.clipId;
+    this.state = {
+      clipId: props?.clipId,
+    };
+  }
+
+  // The clipId state is used to prevent hydration mismatches between the server and client (issue #2941).
+  // A better alternative would be to utilize React 18's useId hook instead of uniqueId, which would avoid needing state for this purpose.
+  // However, this component currently supports React 16 at the time of writing, so this workaround is necessary.
+  componentDidMount() {
+    if (!this.state.clipId) {
+      this.setState({ clipId: uniqueId("victory-clip-") });
+    }
   }
 
   calculateAttributes(props) {
@@ -204,6 +218,6 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
       translateX,
       translateY,
     });
-    return this.renderClippedGroup(clipProps, this.clipId);
+    return this.renderClippedGroup(clipProps, this.state.clipId);
   }
 }