Merged in feature/IO-3499-React-19 (pull request #2894)

feature/IO-3499-React-19 -Checkpoint

client/src/components/production-board-kanban/trello-board/controllers/BoardContainer.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { DragDropContext } from "../dnd/lib";
 import PropTypes from "prop-types";
@@ -7,6 +7,7 @@ import { PopoverWrapper } from "react-popopo";
 import * as actions from "../../../../redux/trello/trello.actions.js";
 import { BoardWrapper } from "../styles/Base.js";
 import ProductionStatistics from "../../production-board-kanban.statistics.jsx";
+import isEqual from "lodash/isEqual";
 
 const useDragMap = () => {
   const dragMapRef = useRef(new Map());
@@ -47,8 +48,9 @@ const BoardContainer = ({
   const dispatch = useDispatch();
   const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
   const { setDragTime, getLastDragTime } = useDragMap();
+  const previousDataRef = useRef(null);
 
-  const wireEventBus = () => {
+  const wireEventBus = useCallback(() => {
     const eventBus = {
       publish: (event) => {
         switch (event.type) {
@@ -68,14 +70,17 @@ const BoardContainer = ({
       }
     };
     eventBusHandle(eventBus);
-  };
+  }, [dispatch, eventBusHandle]);
 
   useEffect(() => {
-    dispatch(actions.loadBoard(data));
-    if (eventBusHandle) {
-      wireEventBus();
+    if (!isEqual(previousDataRef.current, data)) {
+      previousDataRef.current = data;
+      dispatch(actions.loadBoard(data));
+      if (eventBusHandle) {
+        wireEventBus();
+      }
     }
-  }, [data, eventBusHandle, dispatch]);
+  }, [data, wireEventBus, dispatch]);
 
   useEffect(() => {
     onDataChange(currentReducerData);
@@ -153,12 +158,17 @@ const BoardContainer = ({
     }
   };
 
+  const boardKey = useMemo(() => {
+    // React Compiler: Generate stable key from lane IDs
+    return currentReducerData.lanes?.map((l) => l.id).join("-") || "empty";
+  }, [currentReducerData.lanes]);
+
   return (
     <div>
       <ProductionStatistics data={queryData} reducerData={currentReducerData} cardSettings={cardSettings} />
       <PopoverWrapper>
         <BoardWrapper orientation={orientation}>
-          <DragDropContext onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId="production-board">
+          <DragDropContext key={boardKey} onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId="production-board">
             {currentReducerData.lanes.map((lane, index) => (
               <Lane
                 key={lane.id}

client/src/components/production-board-kanban/trello-board/dnd/lib/state/registry/use-registry.js

@@ -1,14 +1,28 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import createRegistry from "./create-registry";
 
 export default function useRegistry() {
   const registry = useMemo(createRegistry, []);
+  const cleanupScheduledRef = useRef(false);
+
   useEffect(() => {
+    // Cancel any scheduled cleanup when component mounts
+    // This handles React StrictMode double-mounting
+    cleanupScheduledRef.current = false;
+
     return function unmount() {
+      // Mark cleanup as scheduled
+      cleanupScheduledRef.current = true;
+
       // clean up the registry to avoid any leaks
       // doing it after an animation frame so that other things unmounting
       // can continue to interact with the registry
-      requestAnimationFrame(registry.clean);
+      requestAnimationFrame(() => {
+        // Only clean if still scheduled (not cancelled by remount)
+        if (cleanupScheduledRef.current) {
+          registry.clean();
+        }
+      });
     };
   }, [registry]);
   return registry;

client/src/components/production-board-kanban/trello-board/dnd/lib/view/use-droppable-publisher/use-droppable-publisher.js

@@ -171,6 +171,7 @@ export default function useDroppablePublisher(args) {
       }
       registry.droppable.unregister(entry);
     };
+    // eslint-disable-next-line react-compiler/react-compiler
   }, [callbacks, descriptor, dragStopped, entry, marshal, registry.droppable]);
 
   // update is enabled with the marshal