diff --git a/src/routePlanner/index.tsx b/src/routePlanner/index.tsx
index 0d188a1..f156ec2 100644
--- a/src/routePlanner/index.tsx
+++ b/src/routePlanner/index.tsx
@@ -1,17 +1,12 @@
-import { useMemo, useReducer } from 'preact/hooks';
 import { ExportComponent } from './export';
 import { MapComponent } from './map';
 import { MarkersComponent } from './markers';
-import { createChangeStateMethods, markersReducer } from './reducer';
+import { useMarkers } from './useMarkers';
 
 import './style.css';
 
 export const RoutePlanner = () => {
-    const [markers, dispatchMarkers] = useReducer(markersReducer, []);
-    const { reorderMarkers, addMarker } = useMemo(
-        () => createChangeStateMethods(dispatchMarkers),
-        [],
-    );
+    const [markers, { reorderMarkers, addMarker }] = useMarkers();
 
     return (
         <section class="route-planner">
diff --git a/src/routePlanner/reducer.test.ts b/src/routePlanner/useMarkers.test.ts
similarity index 95%
rename from src/routePlanner/reducer.test.ts
rename to src/routePlanner/useMarkers.test.ts
index b5cbc19..e8e69f6 100644
--- a/src/routePlanner/reducer.test.ts
+++ b/src/routePlanner/useMarkers.test.ts
@@ -1,6 +1,11 @@
 import t from 'tap';
 import { Marker, ReducerAction } from './types';
-import { createChangeStateMethods, markersReducer } from './reducer.js';
+import { createChangeStateMethods, markersReducer } from './useMarkers.js';
+
+// Testing entire `useMarkers` custom hook would require us to create test preact components here
+// and render them into virtual DOM and check the results, which is just too much hassle
+// (but that's how Facebook designed API of hooks, with all that stateful contextful magic hidden under the hood).
+// So we'll only test `markersReducer` and `createChangeStateMethods` here.
 
 const createReducerWithState = () => {
     let markers: Marker[] = [];
diff --git a/src/routePlanner/reducer.ts b/src/routePlanner/useMarkers.ts
similarity index 91%
rename from src/routePlanner/reducer.ts
rename to src/routePlanner/useMarkers.ts
index 4533c04..8278334 100644
--- a/src/routePlanner/reducer.ts
+++ b/src/routePlanner/useMarkers.ts
@@ -1,5 +1,5 @@
 import { nanoid } from 'nanoid';
-import { Dispatch } from 'preact/hooks';
+import { Dispatch, useMemo, useReducer } from 'preact/hooks';
 import { reorderElements } from '../shared/collections.js';
 import { Coordinates } from '../shared/types';
 import { Marker, ReducerAction, ReorderMarkersParams } from './types';
@@ -129,3 +129,13 @@ export const createChangeStateMethods = (
         addMarker,
     };
 };
+
+export const useMarkers = () => {
+    const [markers, dispatchMarkers] = useReducer(markersReducer, []);
+    const changeStateMethods = useMemo(
+        () => createChangeStateMethods(dispatchMarkers),
+        [],
+    );
+
+    return [markers, changeStateMethods] as const;
+};