CODEWITHSUNDEEP
reactjsreact-hooks
IWI
IWI

Reputation: 1608

update to hook causes Invalid attempt to destructure non-iterable instance

I have a custom hook for the use-debounce package that looks takes in a state and causes a delay to return the setstate. There was recently a change to to the module breaking change: Now useDebouncedCallback returns an object instead of array: located here under 5.0.0 And I simply don't understand the simple update my code needs in order to work again

The Hook

export default (initialState, durationInMs = 200, options = {}) => {
  const [internalState, setInternalState] = useState(initialState);

  const [debouncedSetter] = useDebouncedCallback(
    setInternalState,
    durationInMs,
    options
  );
  return [internalState, debouncedSetter];
};

How I call the hook inside my component

 const [searchText, setSearchText] = useDebouncedState("", 900, {
   maxWait: 1000,
 });
 setSearchText(searchText);

The error i get is TypeError: Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method. because its now returning an object. What do I do to modify my code to handle the change.

Upvotes: 0

Views: 277

Answers (1)

Ivar
Ivar

Reputation: 4901

By looking into the docs it seems that you should change:

const [debouncedSetter] = useDebouncedCallback(setInternalState, durationInMs, options);

with

const {callback: debouncedSetter} = useDebouncedCallback(setInternalState, durationInMs, options);

Given an explanation in the release notes:

Old:

const [debouncedCallback, cancelDebouncedCallback, callPending] = useDebouncedCallback(/*...*/);

New:

const debounced = useDebouncedCallback(/*...*/);
/**
 * debounced: {
 *   callback: (...args: T) => unknown, which is debouncedCallback
 *   cancel: () => void, which is cancelDebouncedCallback
 *   flush: () => void, which is callPending
 *   pending: () => boolean, which is a new function
 * }
 */

Upvotes: 1

Related Questions