#4020 refactor taskcolumn to do all height change obs inside ref prop

Author: getheobald

src/frontend/src/pages/ProjectDetailPage/ProjectViewContainer/TaskList/v2/TaskColumn.tsx

@@ -1,6 +1,6 @@
 import { Droppable } from '@hello-pangea/dnd';
 import { Box, Typography, useTheme } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import { Project, Task, TaskStatus, TaskWithIndex } from 'shared';
 import { statusNames, TaskCard } from '.';
 import { NERButton } from '../../../../../components/NERButton';
@@ -35,23 +35,6 @@ export const TaskColumn = ({
   const toast = useToast();
   const theme = useTheme();
 
-  // create ref to droppable box dom node so we can measure height
-  const droppableBoxRef = useRef<HTMLElement | null>(null);
-
-  // effectively runs once on mount because both deps (task status and callback func) are stable
-  useEffect(() => {
-    if (!droppableBoxRef.current) return;
-
-    const droppableBox = droppableBoxRef.current;
-    const observer = new ResizeObserver(() => {
-      onHeightChange(status, droppableBox.scrollHeight);
-    });
-    observer.observe(droppableBox);
-
-    // cleanup func to disconnect observer when component unmounts
-    return () => observer.disconnect();
-  }, [status, onHeightChange]);
-
   const handleCreateTask = async ({ notes, title, deadline, assignees, priority, startDate }: EditTaskFormInput) => {
     try {
       const task = await createTask({
@@ -114,7 +97,13 @@ export const TaskColumn = ({
             <Box
               ref={(droppableBox: HTMLElement | null) => {
                 droppableProvided.innerRef(droppableBox); // give dnd lib access to dom node
-                droppableBoxRef.current = droppableBox; // give ourselves access to dom node
+                if (!droppableBox) return;
+
+                const observer = new ResizeObserver(() => {
+                  onHeightChange(status, droppableBox.scrollHeight);
+                });
+                observer.observe(droppableBox);
+                return () => observer.disconnect();
               }}
               {...droppableProvided.droppableProps}
               className={snapshot.isDraggingOver ? ' isDraggingOver' : ''}