Got eslint Warn with sensors

[MatteoGauthier]

Hey I got this warning, do you know how to fix this ?

warning  The 'sensors' array makes the dependencies of useMemo Hook (at line 65) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'sensors' in its own useMemo() Hook

const sensors = [useSensor(PointerSensor)];

// ...

  const renderShapesList = useMemo(
    () => (
      <DndContext id={'dnd-context'} sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext items={shapes.map((shape) => shape.id)} strategy={rectSortingStrategy}>
          {/* 
            items
              */}
        </SortableContext>
      </DndContext>
    ),
    [handleDelete, handleDragEnd, handleToggleVisibility, sensors, shapes],
  );

Does someone can help me ?

[clauderic]

You can import useSensors from @dnd-kit/core which uses useMemo internally to memoize the sensors:

import {useSensors} from '@dnd-kit/core';

const sensors = useSensors(
  useSensor(PointerSensor)];
);

Having said that, I'm not sure why you need to memoize the rendered JSX for your shapes list, seems completely un-necessary.

[MatteoGauthier]

Thanks a lot for your answer, this will help me a lot ! 👍