xnimorz/use-debounce

Memoization

Closed this issue · 4 comments

JamesConsidine commented

There is a heading in the documentation about memoization, but no example. I think you will need to allow a dependency array to be passed in, and make the usage the same as useCallback

xnimorz commented

Hi @JamesConsidine, Thank you for the issue!
We don't use deps array explicitly.

Some refs describing why it's better:
https://twitter.com/mostruash/status/1109134981182488576 + #21

With Example: #53

To use memorization you could combine useCallback + useDebouncedCallback:

// memoize
const fetchPage = useCallback(activePage => {
    setContent({ title: activePage, body: "Lorem Ipsum" });
  }, []);

// debounce
  const [fetchPageDebounced] = useDebouncedCallback(fetchPage, 500);

In case you'd like to improve docs, I'll be glad to receive a PR :)

JamesConsidine commented

Wow ok, I was clearly quite wrong here lol. Thanks for the example! I don't think I understand why we don't want to use deps though. Any chance you could give me a TLDR?

Re: the docs, I do think they need something to explain how to use it like that, so ill have a crack at a PR when I get a moment

  • 👍1
xnimorz commented

Any chance you could give me a TLDR?

The main reason is that automatic rules, like react-hooks/exhaustive-deps, don't check whether deps are right for custom hooks. They check only for the original hooks. It's why the react team don't recommend to make your own deps array for custom hooks:
https://twitter.com/dan_abramov/status/1109136157403680768
image

JamesConsidine commented

Ok cool! I was seeing this as a replacement for useCallback, but really it supplements it. So yeah, I will close the issue and have a crack at the docs later. Thanks for all the help!

  • ❤️1