Laggy Performance

[happer64bit]

Describe the bug

When I call move or zoom on the map it start to lag.

Your Example Website or App

http://localhost:3000

Steps to Reproduce the Bug or Issue

import { Title } from "@solidjs/meta";
import ControlUI from "~/components/ControlUI";
import useMap, { buildMap } from "~/components/useMap";
import * as L from 'leaflet';
import supabase from "~/lib/supabase";
import { Suspense, createEffect, onMount } from "solid-js";

function debounce(func: Function, delay: number) {
  let timeoutId: ReturnType<typeof setTimeout>;
  return function (...args: any[]) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

export default function Home() {
  let mapDiv: HTMLDivElement;
  let map: L.Map;

  onMount(() => {
    map = buildMap(mapDiv)
  })

  const debouncedFetchItems = debounce(fetchItems, 1000);

  function fetchItems(event: L.LeafletEvent) {
    setTimeout(async () => {
      const { data } = await supabase.rpc("nearby_items", {
        lat: map.getCenter().lat,
        long: map.getCenter().lng
      })
    }, 1000)
  }

  createEffect(() => {
    if (map) {
      map.on("moveend", debouncedFetchItems)
      map.on("zoomend", debouncedFetchItems)
    }

    return () => {
      map.off("moveend", debouncedFetchItems)
      map.off("zoomend", debouncedFetchItems)
    }
  }, [])

  return (
    <main>
      <Title>Galxira</Title>
      <Suspense fallback={null}>
        <div ref={mapDiv} class="h-screen w-screen z-40" />
      </Suspense>
      <ControlUI mapDiv={mapDiv} />
    </main>
  );
}

Expected behavior

Smooth experience

Screenshots or Videos

No response

Platform

• OS: [Windows]
• Browser: [Chrome]
• Version: [121.0.6167.161]

Additional context

No response

[atk]

createEffect is not exactly like react's useEffect. Returning an unsubscribe handler is not going to accomplish anything and you also need no dependency array. The idiomatic solution would be to use the map instantiated in onMount to bind the events and an onCleanup to unbind them.

[ryansolid]

Need a reproduction to look at what is going on here. This looks like React code with some functions renamed. And majority of the code is missing (the components). It looks like the data from the debounce function is never used for anything. You might be better served coming to the discord and talking through what you are trying to do. Or using our Github discussions where more people can look at it.

[lxsmnsyc]

I'm not exactly sure what the role of the setTimeout in fetchItems do. Was that written before you decided to switch to debounce?

[ryansolid]

Moving to a discussion.