Ajay•3mo ago

Convex Cursor Rules / Best Practices

I wonder if the Convex Cursor Rules should be updated to include some language on debouncing? I feel like a good piece of software architecture to have between queries/mutations and UI is a good set of debouncing fx's.

3 Replies

AjayOP•3mo ago

I wonder if there's any potential for followup here? What I've found is that when I add some understanding of debouncing to each mutation by way of a callback:

import { useRef, useCallback } from "react";

// Debounce utility
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// React hook: useDebouncedCallback
function useDebouncedCallback(fn, delay) {
  const fnRef = useRef(fn);
  fnRef.current = fn;

  const debounced = useRef(
    debounce((...args) => fnRef.current(...args), delay)
  );

  return useCallback((...args) => {
    debounced.current(...args);
  }, []);
}

import { useRef, useCallback } from "react";

// Debounce utility
function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

// React hook: useDebouncedCallback
function useDebouncedCallback(fn, delay) {
  const fnRef = useRef(fn);
  fnRef.current = fn;

  const debounced = useRef(
    debounce((...args) => fnRef.current(...args), delay)
  );

  return useCallback((...args) => {
    debounced.current(...args);
  }, []);
}

const handleChange = useDebouncedCallback((value) => {
  // Do something with value, e.g., API call
}, 300);

const handleChange = useDebouncedCallback((value) => {
  // Do something with value, e.g., API call
}, 300);

then the UI feels snappy and mitigates for the delay in using Convex. Are there any other design patterns people found helpful?

lefrog•3mo ago

have you looked at convex rate limiter component?

AjayOP•3mo ago

No I have not. I just had a look - another way to frame the same question might be - are there a set of Convex components that others have curated (like curating taste) that enforce a particular design pattern that would be best spelled out in a cursor doc? Seems like hte rate limiter is just debouncing and its utility is high in the use cases outlined in the docs for that component.

Convex Cursor Rules / Best Practices

Did you find this page helpful?