fix: useMemo -> useState in useClusterer

Author: JiriHoffmann

example/src/Map.tsx

@@ -1,12 +1,12 @@
 import { useState, useRef } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Button, Dimensions, StyleSheet, View } from 'react-native';
 import {
   Clusterer,
   isClusterFeature,
   type Supercluster,
 } from 'react-native-clusterer';
 import MapView, { type Region } from 'react-native-maps';
-import { initialRegion, parsedPlacesData } from './places';
+import { getRandomData, initialRegion, parsedPlacesData } from './places';
 import { Point } from './Point';
 
 type IFeature = Supercluster.PointOrClusterFeature<any, any>;
@@ -17,6 +17,9 @@ const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT };
 
 export const Map = () => {
   const [region, setRegion] = useState<Region>(initialRegion);
+  const [places, setPlaces] =
+    useState<Supercluster.PointFeature<any>[]>(parsedPlacesData);
+  const [options, setOptions] = useState({ radius: 18 });
   const mapRef = useRef<MapView>(null);
 
   const _handlePointPress = (point: IFeature) => {
@@ -35,9 +38,9 @@ export const Map = () => {
         style={MAP_DIMENSIONS}
       >
         <Clusterer
-          data={parsedPlacesData}
+          data={places}
           region={region}
-          options={{ radius: 18 }}
+          options={options}
           mapDimensions={MAP_DIMENSIONS}
           renderItem={(item) => {
             return (
@@ -54,6 +57,18 @@ export const Map = () => {
           }}
         />
       </MapView>
+      <View style={styles.buttonContainer}>
+        <Button
+          title="Add 1000 points"
+          onPress={() =>
+            setPlaces(parsedPlacesData.concat(getRandomData(1000)))
+          }
+        />
+        <Button
+          title="Change options"
+          onPress={() => setOptions({ radius: Math.floor(Math.random() * 18) })}
+        />
+      </View>
     </View>
   );
 };
@@ -62,4 +77,19 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%',
+    backgroundColor: '#ed8e8efd',
+    borderColor: '#ed8e8e',
+    borderWidth: 1,
+    borderRadius: 5,
+    gap: 10,
+    paddingHorizontal: 20,
+  },
 });

src/useClusterer.ts

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useState } from 'react';
 import type { Supercluster } from './types';
 import type { MapDimensions, Region } from './types';
 import SuperclusterClass from './Supercluster';
@@ -16,19 +16,30 @@ export function useClusterer<
   (Supercluster.PointFeature<P> | Supercluster.ClusterFeature<C>)[],
   SuperclusterClass<P, C>,
 ] {
-  const supercluster = useMemo(
-    () => new SuperclusterClass(options).load(data),
-    [data, options]
+  const [supercluster, setSupercluster] = useState(
+    new SuperclusterClass(options).load(data)
   );
 
-  const points = useMemo(
-    () => supercluster.getClustersFromRegion(region, mapDimensions),
-    [supercluster, region, mapDimensions]
+  const [points, setPoints] = useState(
+    supercluster.getClustersFromRegion(region, mapDimensions)
   );
 
-  // TODO: adjust type
-  return [
-    points as (Supercluster.PointFeature<P> | Supercluster.ClusterFeature<C>)[],
-    supercluster,
-  ];
+  useEffect(() => {
+    setSupercluster(new SuperclusterClass(options).load(data));
+    // Keep option properties as individual dependencies in case "options" prop is passed as an inline object
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    data,
+    options?.extent,
+    options?.radius,
+    options?.minPoints,
+    options?.minZoom,
+    options?.maxZoom,
+  ]);
+
+  useEffect(() => {
+    setPoints(supercluster.getClustersFromRegion(region, mapDimensions));
+  }, [supercluster, region, mapDimensions]);
+
+  return [points, supercluster];
 }