Repository navigation
chore: avoid react linting errors (attempt #2) - #85
Conversation
✅ Deploy Preview for eslint-code-explorer ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
I tested that it does not cause issues when typing quickly into the editor (was the problem with #83). |
eca3d32 to
45eef42
Compare
| () => | ||
| debounce((value: string) => { | ||
| onChange?.(value); | ||
| }, 400), |
There was a problem hiding this comment.
const debouncedOnChange = useMemo(
() =>
debounce((value: string) => {
onChange?.(value);
}, 400),
[onChange],
);
How does useMemo help in this case? We are returning a function, not a value. useCallback is preferred when using a function. In this case, if we use useMemo, it wouldn't have any impact, right? Is my understanding correct, or am I missing something?
There was a problem hiding this comment.
Functionally, it is equivalent, see also https://react.dev/reference/react/useCallback#how-is-usecallback-related-to-usememo
But for whatever reason, the react eslint plugin would warn when using useCallback:
React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. eslint(react-hooks/exhaustive-deps)
That error vanishes with useMemo.
Prerequisites checklist
What is the purpose of this pull request?
Attempt #2 (after #83) to unblock #70.
By avoiding the 2 linting errors already present in the codebase.
What changes did you make? (Give an overview)
This time, I did not introduce any behavior changes.
I just replaced
useCallbackbyuseMemobecause then the warningReact Hook useCallback received a function whose dependencies are unknownvanishes.useEffectfor code path on mountuseCallbackbyuseMemoRelated Issues
Is there anything you'd like reviewers to focus on?