react-beautiful-dnd pull out the anonymous function from React Draggable component - reactjs

Question

I need to pull out the anonymous function from Draggable into a callback function using the useCallback(..., []) hook supplying the dependencies provided, snapshot if possible.
Upon investigation we have found that the 3rd party component Draggable is using an anonymous function that essentially recreates the function on the stack for each step in the list. When this happens for a route with 500 steps the stack trace gets increased by 500 bringing us closer to a stack overflow.
React has a virtual dom, and if the child component has not changed it will not re-render it. But anonymous functions make it re-render every time, but if the anonymous function is pushed down one more layer it won't see it as changed.
Here is my implemented code.
const StepContainer = ({
step,
index,
draggedDescription,
isSelected,
selectedTaskIdsCount
}: Props) => {
return (
<Box data-testid="stepContainer" className={stepContainer}>
<Box className={'hoverstyle'}>
<Draggable draggableId={step.key} index={index} key={step.key}>
{(
provided: DraggableProvided,
snapshot: DraggableStateSnapshot
) => (
<div
data-testid="clickHandler"
{...provided.draggableProps}
ref={provided.innerRef}
data-is-dragging={
snapshot.isDragging && !snapshot.isDropAnimating
}
className={snapshot.isDragging ? `${dragging}` : ''}
>
{snapshot.isDragging ? (
<DraggedStepAsset
draggedDescription={draggedDescription}
stepCount={
selectedTaskIdsCount > 1
? selectedTaskIdsCount
: 1
}
/>
) : (
<AccordionSteps
isSelected={isSelected}
provided={provided}
step={step}
/>
)}
</div>
)}
</Draggable>
</Box>
</Box>
);
};
The idea is to pull out the anonymous function into a callback function using the useCallback(..., []) hook supplying the dependecies provided, snapshot if possible. Then we can wrap the useCallback function with a useMemo() to ensure React memoizes it, this could potentially enable react to reuse the same function on the stack for every step-component instead of adding it for each step-component. Making our code much more optimized.
Please help me to resolve this issue.

Answer 1

Hope the below snippet works for you.
const StepContainer = ({
step,
index,
draggedDescription,
isSelected,
selectedTaskIdsCount
}: Props) => {
return (
<Box data-testid="stepContainer" className={stepContainer}>
<Box className={'hoverstyle'}>
<Draggable draggableId={step.key} index={index} key={step.key}>
{DraggableContentCallback}
</Draggable>
</Box>
</Box>
);
};
const DraggableContent = (
provided: DraggableProvided,
snapshot: DraggableStateSnapshot
) => (
<div
data-testid="clickHandler"
{...provided.draggableProps}
ref={provided.innerRef}
data-is-dragging={
snapshot.isDragging && !snapshot.isDropAnimating
}
className={snapshot.isDragging ? `${dragging}` : ''}
>
{snapshot.isDragging ? (
<DraggedStepAsset
draggedDescription={draggedDescription}
stepCount={
selectedTaskIdsCount > 1
? selectedTaskIdsCount
: 1
}
/>
) : (
<AccordionSteps
isSelected={isSelected}
provided={provided}
step={step}
/>
)}
</div>
);
const DraggableContentCallback = useCallback(DraggableContent, []);