[charts] Rename useIsClient (#16937)

Author: bernardobelchior

packages/x-charts/src/ChartsText/ChartsText.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GetWordsByLinesParams, getWordsByLines } from '../internals/getWordsByLines';
-import { useIsClient } from '../hooks/useIsClient';
+import { useIsHydrated } from '../hooks/useIsHydrated';
 
 export interface ChartsTextProps
   extends Omit<
@@ -25,11 +25,11 @@ function ChartsText(props: ChartsTextProps) {
 
   const { angle, textAnchor, dominantBaseline, ...style } = styleProps ?? {};
 
-  const isClient = useIsClient();
+  const isHydrated = useIsHydrated();
 
   const wordsByLines = React.useMemo(
-    () => getWordsByLines({ style, needsComputation: isClient && text.includes('\n'), text }),
-    [style, text, isClient],
+    () => getWordsByLines({ style, needsComputation: isHydrated && text.includes('\n'), text }),
+    [style, text, isHydrated],
   );
 
   let startDy: number;

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -6,7 +6,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
 import { clampAngle } from '../internals/clampAngle';
-import { useIsClient } from '../hooks/useIsClient';
+import { useIsHydrated } from '../hooks/useIsHydrated';
 import { doesTextFitInRect, ellipsize } from '../internals/ellipsize';
 import { getStringSize } from '../internals/domUtils';
 import { useTicks, TickItemType } from '../hooks/useTicks';
@@ -238,7 +238,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   const drawingArea = useDrawingArea();
   const { left, top, width, height } = drawingArea;
   const { instance } = useChartContext();
-  const isClient = useIsClient();
+  const isHydrated = useIsHydrated();
 
   const tickSize = disableTicks ? 4 : tickSizeProp;
 
@@ -333,7 +333,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
     axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP,
   );
 
-  const tickLabels = isClient
+  const tickLabels = isHydrated
     ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, axisTickLabelProps.style)
     : new Map(Array.from(visibleLabels).map((item) => [item, item.formattedValue]));
 

packages/x-charts/src/hooks/useIsClient.ts packages/x-charts/src/hooks/useIsHydrated.ts

@@ -1,15 +1,15 @@
 'use client';
 import * as React from 'react';
 
-/** Returns true after this hook runs the client.
+/** Returns true after hydration is done on the client.
  *
  * Basically a implementation of Option 2 of this gist: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#option-2-lazily-show-component-with-uselayouteffect. */
-export function useIsClient() {
-  const [isClient, setIsClient] = React.useState(false);
+export function useIsHydrated() {
+  const [isHydrated, setIsHydrated] = React.useState(false);
 
   React.useEffect(() => {
-    setIsClient(true);
+    setIsHydrated(true);
   }, []);
 
-  return isClient;
+  return isHydrated;
 }