Refactor VersionSelector and SlidePanel components to improve performance and state management. Introduced useCallback for event handlers in VersionSelector and implemented local state caching for children in SlidePanel to prevent unnecessary re-renders.

Author: bdahle

xp-archive/client/versionSelector/SlidePanel/SlidePanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import style from './SlidePanel.module.css';
 
@@ -10,6 +10,15 @@ type SlidePanelProps = {
 
 export const SlidePanel = ({ isOpen, onClose, children }: SlidePanelProps) => {
     const dialogRef = useRef<HTMLDialogElement>(null);
+    // Keep a local copy of children to prevent unmounting
+    const [cachedChildren, setCachedChildren] = useState<React.ReactNode>(children);
+
+    // Update cached children only when isOpen changes from false to true
+    useEffect(() => {
+        if (isOpen) {
+            setCachedChildren(children);
+        }
+    }, [isOpen, children]);
 
     useEffect(() => {
         const dialog = dialogRef.current;
@@ -22,8 +31,7 @@ export const SlidePanel = ({ isOpen, onClose, children }: SlidePanelProps) => {
         }
     }, [isOpen]);
 
-    if (!isOpen) return null;
-
+    // Always render the dialog, but control its visibility with the dialog API
     return createPortal(
         <dialog
             ref={dialogRef}
@@ -37,7 +45,10 @@ export const SlidePanel = ({ isOpen, onClose, children }: SlidePanelProps) => {
                 onClick={onClose}
                 aria-label="Close version selector"
             />
-            <div className={style.panel}>{children}</div>
+            <div className={style.panel}>
+                {/* Always use the cached children */}
+                {cachedChildren}
+            </div>
         </dialog>,
         document.body
     );

xp-archive/client/versionSelector/VersionSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import { Heading, Button, Search } from '@navikt/ds-react';
 import { VersionReference } from 'shared/types';
 import { formatTimestamp } from '@common/shared/timestamp';
@@ -36,15 +36,21 @@ export const VersionSelector = ({ versions, isOpen, onClose }: Props) => {
     const [searchQuery, setSearchQuery] = useState('');
     const { setSelectedVersion, selectedVersion } = useAppState();
 
-    const handleClose = () => {
+    const handleClose = useCallback(() => {
         setSearchQuery('');
         onClose();
-    };
+    }, [onClose]);
 
-    const selectVersion = (versionId: string) => {
-        // Just update the state, don't modify the URL here
-        setSelectedVersion(versionId);
-    };
+    const selectVersion = useCallback(
+        (versionId: string) => {
+            setSelectedVersion(versionId);
+        },
+        [setSelectedVersion]
+    );
+
+    const handleSearchChange = useCallback((value: string) => {
+        setSearchQuery(value);
+    }, []);
 
     const filteredVersions = versions.filter((version) =>
         formatTimestamp(version.timestamp).toLowerCase().includes(searchQuery.toLowerCase())
@@ -59,7 +65,7 @@ export const VersionSelector = ({ versions, isOpen, onClose }: Props) => {
                 label="Søk i versjoner"
                 variant="simple"
                 value={searchQuery}
-                onChange={setSearchQuery}
+                onChange={handleSearchChange}
                 className={style.search}
             />
             <div className={style.versionList}>