Missing memoization

[AdrienLemaire]

Describe the bug Several hooks are missing useMemo or useCallback and returning new objects/function at every render. This cause issues in effects that have dependencies on these, triggering them when they shouldn't.

To Reproduce Example using useTimeout

  const myRef = useRef(null);
  const callback = useCallback(() => {
      myRef.current.x = x;
      myRef.current.y = y
    }, [])
  const { start: addInitialPositions, clear } = useTimeout(callback, 0);

  useEffect(() => {
    addInitialPositions();
    return clear;
  }, [addInitialPositions, clear]);

I want my effect to be executed only once, and using a timeout of 0 to change the priority of the callback in the execution stack. But useTimeout returns new functions for start & clear at every render, which retriggers the useEffect every time.

Expected behavior

• start should be memoized
• clear should be memoized

in https://github.com/imbhargav5/rooks/blob/535f788bbd1196fed4ae88cfd2afea36f85a0c53/src/hooks/useTimeout.ts#L27-L37

-  function start() {
-    setIsTimeoutActive(true);
-  }
+ const start = useCallback(() => setIsTimeoutActive(true), [])

Alternative solution Force an empty dependency list

  useEffect(() => {
    addInitialPositions();
    return clear;
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

Unfortunately, this hides the problem that functions are unnecessarily being recreated. Since our component is rerendered at a 60FPS rate, we have 60 new start & clear functions created at every second, increasing the number of garbage collector calls, which can create visual lags.

Please consider reviewing all your hooks to insure that objects & functions are only recreated when needed (when a dependency is changing), thanks.

[imbhargav5]

@AdrienLemaire Excellent point. I will address them this weekend.

[imbhargav5]

Also, apologies for living under a cave and not looking at PRs.

[imbhargav5]

Fix is WIP. It will be out in a couple of days. Thank you

[AdrienLemaire]

Thank you!

[github-actions[bot]]

:tada: This issue has been resolved in version 5.0.3 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: