delucis / delucis/bgio-effects

Move responsibility for callback memoization to user?

Open
#115 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
25
Forks
10
PR merge metrics
No merged PRs in 30d

Description

Currently `useEffectListener` takes callbacks & dependency arrays to pass to React’s `useCallback` memoization hook:

```js
useEffectListener('rollDie', callback, dependencies)
```

While researching approaches for #111 and #112, I read [this documentation for the React hooks 'exhaustive-deps' rule][ri] in more detail. If I understand correctly, there’s technically no completely correct way to `useCallback` to memoize a user-passed function. To be sure to catch all scenarios correctly, the hook in theory *has* to update when the function’s identity changes (so it should include the function itself in the dependencies of `useCallback` or `useEffect`). I’ve seen some heavily-used examples that don’t follow this rule either (like [this `useAsyncFn` hook][ua], which calls a user-passed function within `useCallback` without including it in the dependency array), so perhaps this is OK but the edge cases that are buggy, will be hard to debug for anyone who does run in to them.

The solution here would be to rely on users memoizing their listener functions themselves:

```js
const callback = useCallback(() => {}, []);
useEffectListener('rollDie', callback);
```

This would make using `useEffectListener` slightly more verbose, but technically more correct 🤷.

[ri]: https://github.com/facebook/react/issues/14920#issuecomment-471070149
[ua]: https://github.com/streamich/react-use/blob/95b78597077a6aed4873705d79a46b00845a53dc/src/useAsyncFn.ts#L49

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at useEffectListener and the React useCallback/useEffect exhaustive-deps guidance linked in the issue. Define whether callers must memoize callbacks themselves, then verify the resulting API and behavior for user-memoized and changing callbacks.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.