[Linting] Fixed useExhaustiveDependencies in biome

.changeset/bright-meals-repair.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Performance: :zap: Optimized memoization for rerendring in some components.

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -109,7 +109,7 @@ const App = () => {
         icon.removeEventListener("dragend", dragEvent);
       }
     };
-  }, [categories]);
+  }, []);
 
   return (
     <main tabIndex={-1} className="wrapper">

@navikt/core/css/copybutton.css

@@ -31,7 +31,6 @@
 @media (forced-colors: active) {
   .navds-copybutton {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/css/internalheader.css

@@ -10,7 +10,6 @@
 @media (forced-colors: active) {
   .navds-internalheader {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/css/read-more.css

@@ -19,7 +19,6 @@
 @media (forced-colors: active) {
   .navds-read-more__button {
     background-color: ButtonFace;
-    border-color: ButtonText;
     border: solid 1px ButtonText;
     color: ButtonText;
   }

@navikt/core/react/src/date/datepicker/datepicker.stories.tsx

@@ -73,40 +73,37 @@ export const Default: StoryObj<DefaultStoryProps> = {
           locale={props.locale}
           disableWeekends={props.disableWeekends}
         >
-          {!props.standalone && (
-            <>
-              {props.inputfield && props.mode !== "multiple" ? (
-                <>
-                  {props.mode === "range" ? (
-                    <div style={{ display: "flex", gap: "1rem" }}>
-                      <DatePicker.Input
-                        label="Fra"
-                        size={props?.size}
-                        {...rangeCtx.fromInputProps}
-                      />
-                      <DatePicker.Input
-                        label="Til"
-                        size={props?.size}
-                        {...rangeCtx.toInputProps}
-                      />
-                    </div>
-                  ) : (
-                    <>
-                      <DatePicker.Input
-                        label="Velg dato"
-                        size={props?.size}
-                        {...singleCtx.inputProps}
-                      />
-                    </>
-                  )}
-                </>
-              ) : (
-                <Button onClick={() => setOpen((x) => !x)}>
-                  Åpne datovelger
-                </Button>
-              )}
-            </>
-          )}
+          {!props.standalone &&
+            (props.inputfield && props.mode !== "multiple" ? (
+              <>
+                {props.mode === "range" ? (
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    <DatePicker.Input
+                      label="Fra"
+                      size={props?.size}
+                      {...rangeCtx.fromInputProps}
+                    />
+                    <DatePicker.Input
+                      label="Til"
+                      size={props?.size}
+                      {...rangeCtx.toInputProps}
+                    />
+                  </div>
+                ) : (
+                  <>
+                    <DatePicker.Input
+                      label="Velg dato"
+                      size={props?.size}
+                      {...singleCtx.inputProps}
+                    />
+                  </>
+                )}
+              </>
+            ) : (
+              <Button onClick={() => setOpen((x) => !x)}>
+                Åpne datovelger
+              </Button>
+            ))}
         </Comp>
       </div>
     );

@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -54,6 +54,7 @@ const FilteredOptions = () => {
       )}
 
       {shouldRenderFilteredOptionsList && (
+        /* biome-ignore lint/a11y/useFocusableInteractive: Interaction is not handeled by listbox itself. */
         <ul
           ref={setFilteredOptionsRef}
           role="listbox"

@navikt/core/react/src/form/combobox/Input/Input.context.tsx

@@ -99,7 +99,7 @@ const InputProvider = ({ children, value: props }: Props) => {
       setInternalValue("");
       setSearchTerm("");
     },
-    [externalOnChange, onClear, setInternalValue],
+    [externalOnChange, onClear],
   );
 
   const focusInput = useCallback(() => {

@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -101,13 +101,17 @@ const SelectedOptionsProvider = ({
     [customOptions, onToggleSelected, removeCustomOption],
   );
 
-  const isLimitReached =
-    (!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
-    (!isMultiSelect && selectedOptions.length > 0);
+  const isLimitReached = useMemo(() => {
+    return (
+      (!!maxSelected?.limit && selectedOptions.length >= maxSelected.limit) ||
+      (!isMultiSelect && selectedOptions.length > 0)
+    );
+  }, [maxSelected, selectedOptions, isMultiSelect]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this effect when selectedOptions changes to match the view with the selected options.
   useEffect(() => {
     setHideCaret(isLimitReached);
-  }, [selectedOptions, setHideCaret, isLimitReached]);
+  }, [isLimitReached, selectedOptions, setHideCaret]);
 
   const toggleOption = useCallback(
     (

@navikt/core/react/src/form/combobox/customOptionsContext.tsx

@@ -35,7 +35,7 @@ const CustomOptionsProvider = ({
       );
       focusInput();
     },
-    [focusInput, setCustomOptions],
+    [focusInput],
   );
 
   const addCustomOption = useCallback(
@@ -47,7 +47,7 @@ const CustomOptionsProvider = ({
       }
       focusInput();
     },
-    [focusInput, isMultiSelect, setCustomOptions],
+    [focusInput, isMultiSelect],
   );
 
   const customOptionsState = {

@navikt/core/react/src/modal/Modal.tsx

@@ -127,7 +127,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       // We have to use JS because it doesn't work to set it with a prop (React bug?)
       // Currently doesn't seem to work in Chrome. See also Tooltip.tsx
       if (modalRef.current && portalNode) modalRef.current.autofocus = true;
-    }, [modalRef, portalNode]);
+    }, [portalNode]);
 
     useEffect(() => {
       // We need to have this in a useEffect so that the content renders before the modal is displayed,
@@ -140,7 +140,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           modalRef.current.close();
         }
       }
-    }, [modalRef, portalNode, open]);
+    }, [portalNode, open]);
 
     useBodyScrollLock(modalRef, portalNode, isNested);
 

@navikt/core/react/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -337,6 +337,8 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
      * If `disableOutsidePointerEvents` is true,
      * we want to disable pointer events on the body when the first layer is opened.
      */
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Every time the descendants change, we want to update the body pointer events since we might have added or removed a layer.
     useEffect(() => {
       if (!node || !enabled || !disableOutsidePointerEvents) return;
 
@@ -362,6 +364,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
     /**
      * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM
      */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We explicitly want to run this on unmount, including every time the node updates to make sure we don't lock the application behind pointer-events: none.
     useEffect(() => {
       return () => descendants.values().forEach((x) => x.forceUpdate());
     }, [descendants, node]);

@navikt/core/react/src/progress-bar/ProgressBar.tsx

@@ -107,6 +107,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     }, [simulated?.seconds]);
 
     return (
+      /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */
       <div
         ref={ref}
         className={cl(

@navikt/core/react/src/table/AnimateHeight.tsx

@@ -74,37 +74,36 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const animationClassesTimeoutID = useRef<Timeout>();
   const timeoutID = useRef<Timeout>();
 
-  const duration = prefersReducedMotion ? 0 : userDuration;
+  const initialHeight = useRef<Height>(height);
+  const initialOverflow = useRef<Overflow>("visible");
 
-  let initHeight: Height = height;
-  let initOverflow: Overflow = "visible";
+  const duration = prefersReducedMotion ? 0 : userDuration;
 
-  if (typeof initHeight === "number") {
+  if (typeof initialHeight.current === "number") {
     // Reset negative height to 0
     if (typeof height !== "string") {
-      initHeight = height < 0 ? 0 : height;
+      initialHeight.current = height < 0 ? 0 : height;
     }
-    initOverflow = "hidden";
-  } else if (isPercentage(initHeight)) {
+    initialOverflow.current = "hidden";
+  } else if (isPercentage(initialHeight.current)) {
     // If value is string "0%" make sure we convert it to number 0
-    initHeight = height === "0%" ? 0 : height;
-    initOverflow = "hidden";
+    initialHeight.current = height === "0%" ? 0 : height;
+    initialOverflow.current = "hidden";
   }
 
-  const [currentHeight, setCurrentHeight] = useState<Height>(initHeight);
-  const [overflow, setOverflow] = useState<Overflow>(initOverflow);
+  const [currentHeight, setCurrentHeight] = useState<Height>(
+    initialHeight.current,
+  );
+  const [overflow, setOverflow] = useState<Overflow>(initialOverflow.current);
   const [useTransitions, setUseTransitions] = useState<boolean>(false);
 
-  // ------------------ Did mount
   useEffect(() => {
     // Hide content if height is 0 (to prevent tabbing into it)
-    hideContent(contentElement.current, currentHeight);
-
-    // This should be explicitly run only on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    hideContent(contentElement.current, initialHeight.current);
   }, []);
 
   // ------------------ Height update
+  // biome-ignore lint/correctness/useExhaustiveDependencies: This should be explicitly run only on height change
   useEffect(() => {
     if (height !== prevHeight.current && contentElement.current) {
       showContent(contentElement.current, prevHeight.current);

@navikt/core/react/src/table/stories/table-1.stories.tsx

@@ -98,61 +98,6 @@ export const SizeSmall = () => <TableComponent size="small" />;
 
 export const Buttons = () => <TableComponent size="small" button />;
 
-export const WithDivs = () => {
-  return (
-    <div className="navds-table" role="table">
-      <div className="navds-table__header" role="rowgroup">
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__header-cell" role="columnheader">
-            Fornavn
-          </div>
-          <div className="navds-table__header-cell" role="columnheader">
-            Etternavn
-          </div>
-          <div className="navds-table__header-cell" role="columnheader">
-            Rolle
-          </div>
-        </div>
-      </div>
-      <div className="navds-table__body" role="rowgroup">
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            Jean-Luc
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Picard
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Kaptein
-          </div>
-        </div>
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            William
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Riker
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Kommandør
-          </div>
-        </div>
-        <div className="navds-table__row" role="row">
-          <div className="navds-table__data-cell" role="cell">
-            Geordi
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            La Forge
-          </div>
-          <div className="navds-table__data-cell" role="cell">
-            Sjefsingeniør
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
 const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
   const useToggleList = (initialState) => {
     const [list, setList] = useState(initialState);
@@ -259,10 +204,6 @@ export const Chromatic = {
         <h3>With Buttons</h3>
         <Buttons />
       </div>
-      <div>
-        <h3>Custom with divs</h3>
-        <WithDivs />
-      </div>
       <div>
         <h3>Selection</h3>
         <Selection />

@navikt/core/react/src/util/TextareaAutoSize.tsx

@@ -205,6 +205,7 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
       syncHeight();
     });
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Since value is an external prop, we want to reset the renders on every time it changes, even when it is undefined or empty.
     useEffect(() => {
       renders.current = 0;
     }, [value]);

@navikt/core/react/src/util/create-context.tsx

@@ -43,8 +43,9 @@ export function createContext<T>(options: CreateContextOptions<T> = {}) {
   const Provider = forwardRef<unknown, ProviderProps<T>>(
     ({ children, ...context }, ref) => {
       // Only re-memoize when prop values change
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      const value = React.useMemo(() => context, Object.values(context)) as T;
+
+      // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
+      const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
 
       return (
         <Context.Provider value={ref ? { ...value, ref } : value}>