.pipe() not executing debounceTime

[KrisLau]

I'm trying to debounce() an Observable with pipe() and chaining .subscribe() but for some reason the function in the subscribe is still being called over a dozen times in one go.

What I'm trying to do is pipe the withChangesForTables and debounce the sync call because I want it to be called only when a whole batch of changes have been made. So I created a provider for the sync and wrapped it around my RootNavigator

withChangesForTables on WatermelonDB source code

const SyncContext = createContext();
function useSync() {
    return useContext(SyncContext);
}

function SyncProvider({children}) {
    const [isSyncing, setIsSyncing] = useState(false);
    const [hasUnsynced, setHasUnsynced] = useState(false);

    async function checkUnsyncedChanges() {
        const hasChanges = await hasUnsyncedChanges({
            database
        });
        setHasUnsynced(hasChanges);
    }
    async function sync() {
        await checkUnsyncedChanges();
        if (!isSyncing && hasUnsynced) {
            setIsSyncing(true);
            await synchronizeWithServer();
            setIsSyncing(false);
        }
    }

    
    database.withChangesForTables([
        'table_name',
        'table_name2'
    ]).pipe(
        skip(1),
        // ignore records simply becoming `synced`
        filter(changes => !changes.every(change => change.record.syncStatus === 'synced')),
        // debounce to avoid syncing in the middle of related actions - I put 100000 to test only
        debounceTime(100000),
    ).subscribe({
        //calls API endpoint to sync local DB with server
        next: () => sync(), 
        error: e => console.log(e)
    });

    const value = {
        isSyncing,
        hasUnsynced,
        checkUnsyncedChanges,
        sync
    };

    return (
        <SyncContext.Provider value={value}>
            {children}
        </SyncContext.Provider>
    );
}

[voliva]

I think the problem is that you have the subscribe in the render function of your React component. Essentially, every time there's an update, you are making a new subscription which will do more trigger more updates, which will make more subscriptions, etc.

You need to wrap it in a useEffect, and properly clean the subscription up on the cleanup function.

[KrisLau]

Oops I think I figured it out i just needed to remove the .unsubscribe but I'm not sure why

[Skullcan]

The correct way to cleanup subscriptions in an useEffect hook is returning the cleanup function.

Something like:

useEffect(()=>{
  // Your code;
  return () => {
    // cleanup code;
  };
},[])

I believe the withChangesForTables returns an Observable, so you would have to call the release function in the 'return' function of the useEffect Hook.

Edit:
Also, don't forget to put the dependencies used in the hook into the dependencies array at the end of the function. It will prevent you from ending up with dead references in your functions.

If you are not familiar with the concept.. take a look at the docs in RN website about hooks. They have a lot of examples that are very easy to understand.

[KrisLau]

@Skullcan Not sure why but it's not working again. Sorry if this is a noob question but what is a release function or I guess more specifically what is the release function for withChangesForTables? I have read the RN docs for hooks but I'm not sure that I necessarily understood it 😓

[Skullcan]

Sorry for my poor wording.. I meant unsubscribe function.
i.e this code subs to a setInterval and to the withChangesForTables. Then returns the unsub function for both:

useEffect(() => {
  const intervalId = setInterval(() => {
    try {
      if (isMountedRef.current) SyncAppData();
    } catch (error) {
      logErrors(error);
    }
  }, 30000);

  const watchForChanges = database.withChangesForTables(['orders']).subscribe({
    next: d => {
      // filter() is from lodash lib.
      const changedRecords = filter(d, c => c.record.syncStatus !== 'synced');
      if (changedRecords.length) {
        // debounce() is from lodash lib.
        const syncing = debounce(() => syncDatabase(), 200);
        syncing();
      }
    },
    error: e => logErrors(e)
  });

  return () => {
    // unsubscribe call for the sync Interval
    clearInterval(intervalId);
    // unsubscribe call for the withChangesForTables
    watchForChanges.unsubscribe();
  };
}, [syncId, email, database, toggleLoading, logErrors, isMountedRef, SyncAppData]);

What I meant by return the unsubscribe functions is the clearInterval(); and watchForChanges.unsubscribe();

Now take a look at the last line of the useEffect hook.
There you have to put every dependecy.
A dependecy is any functions/objects the hook depends on to run its code.
The purpose of this dependency array is to force a re-render of the hook everytime any of its dependencies changes thus keeping it updated and preventing dead references.
I hope I could explain it better now and sorry for any English mistakes, it's not my first language.

[KrisLau]

@Skullcan That explanation was super useful and detailed, thank you! I see where I made my mistake now cause I think my problem was that was immediately unsubscribing like this:

useEffect(() => return database,withChangesForTables([...]).subscribe(...).unsubscribe() //just rough syntax haha 

vs the way you're doing it where you store the subscription in a const and unsubscribe() from the stored variable which seems to have resolved a bunch of errors on my end.

Thanks again for all the help, I really can't thank you enough as I've been struggling to get help for my sync problems haha!