replaced useMemo with useCallback

src/routePlanner/index.tsx

@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid';
-import { useMemo, useState } from 'preact/hooks';
+import { useCallback, useState } from 'preact/hooks';
 import { reorderElements } from '../shared/collections';
 import { Coordinates } from '../shared/types';
 import { ExportComponent } from './export';
@@ -12,47 +12,46 @@ import './style.css';
 export const RoutePlanner = () => {
     const [markers, setMarkers] = useState<Marker[]>([]);
 
-    const onMarkersReorder = useMemo(
+    const onMarkersReorder = useCallback(
-        () =>
+        ({ oldIndex, newIndex }: ReorderMarkersParams): void =>
-            ({ oldIndex, newIndex }: ReorderMarkersParams): void =>
+            setMarkers((oldMarkers) => {
-                setMarkers((oldMarkers) => {
+                console.log(
-                    console.log(
+                    `Reordering markers: from ${oldIndex} to ${newIndex}`,
-                        `Reordering markers: from ${oldIndex} to ${newIndex}`,
+                );
-                    );
+                const newMarkers = reorderElements(
-                    const newMarkers = reorderElements(
+                    oldMarkers,
-                        oldMarkers,
+                    oldIndex,
-                        oldIndex,
+                    newIndex,
-                        newIndex,
+                );
-                    );
+                return newMarkers.map((marker, i) => ({
-                    return newMarkers.map((marker, i) => ({
+                    ...marker,
-                        ...marker,
+                    label: `${i + 1}`,
-                        label: `${i + 1}`,
+                    remove: () =>
-                        remove: () =>
+                        onMarkersReorder({
+                            oldIndex: i,
+                            newIndex: -1,
+                        }),
+                    ...(i - 1 >= 0 && {
+                        moveDown: () =>
                             onMarkersReorder({
                                 oldIndex: i,
-                                newIndex: -1,
+                                newIndex: i - 1,
                             }),
-                        ...(i - 1 >= 0 && {
+                    }),
-                            moveDown: () =>
+                    ...(i + 1 < newMarkers.length && {
-                                onMarkersReorder({
+                        moveUp: () =>
-                                    oldIndex: i,
+                            onMarkersReorder({
-                                    newIndex: i - 1,
+                                oldIndex: i,
-                                }),
+                                newIndex: i + 1,
-                        }),
+                            }),
-                        ...(i + 1 < newMarkers.length && {
+                    }),
-                            moveUp: () =>
+                }));
-                                onMarkersReorder({
+            }),
-                                    oldIndex: i,
-                                    newIndex: i + 1,
-                                }),
-                        }),
-                    }));
-                }),
         [],
     );
 
-    const onMapClick = useMemo(
+    const onMapClick = useCallback(
-        () => (coordinates: Coordinates) => {
+        (coordinates: Coordinates) => {
             setMarkers((markers) => [
                 ...markers.slice(0, markers.length - 1),
                 ...markers