Difference between Lodash/debounce() and Zustand transient updates?

[lkdm]

Usage: I'm creating large forms with many components that need to save their data to a server automatically.

Form elements need to be able to be lazy loaded, with data from the server, and be performant on the React application.

Should I be using debounce to delay API calls/saves to state, or use Zustand transient updates for this. Is there a benefit and a way to use both? Thank you.

[lkdm]

Answer

You can use Zustand with debounce.

Is this the best way?

import { useCallback, useEffect, useRef } from "react";
import create from "zustand";
import _ from 'lodash';

const useStore = create(set => ({
  value: "test"
}))


function TextInput(this: any) {

  // Set the default value, without enforcing its state.
  const handleRef = useRef<HTMLInputElement | null>(null)
  useEffect(() => {
    if (handleRef.current)
      handleRef.current.value = "test"
  }, [handleRef]);

  const debounce = useCallback(
    // Delay saving state until user activity stops
    _.debounce((_inputString: string) => {
      useStore.setState({value: _inputString})
      // API Calls go here
      const val = useStore.getState().value
      console.log(val)
    }, 750), // Delay (ms)
    [useStore.getState().value]
  );

  // On each change (keystroke)
  const handleChange = (event: any) => {
    debounce(event.target.value);
  };

  return (
      <input
        type="text"
        ref={handleRef}
        onChange={(event) => handleChange(event)}
      />
  );
}

export default TextInput;