[React 19] Can't use debounce for useCallback - Expected the first argument to be an inline function expressioneslint(react-compiler/react-compiler)

[dante01yoon]

Summary

"react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
"babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",

"eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115", "eslint": "^8.56.0",

.eslintrc.cjs

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'react-compiler'],
  rules: {
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
    "react-compiler/react-compiler": "error"
  },
}

I use debounce functoin for fetching api on each input typing, react-compiler eslint error comes out .

Expected the first argument to be an inline function expressioneslint(react-compiler/react-compiler)

  const debouncedSearch = useCallback(debounce(async (query: string) => {
    const response = await fetch(`api/search/quotes?query=${query}`);
      if(response.ok) {
        const { results } = await response.json();
        setResults(results);
      }
      else {
        setResults([]);
      }
  },300),[]);

how can I pass function be wrapped by another function as a argument in hooks without breaking this lint rule? Should I just not use useCallback in this case?

[gsathya]

Since you're caching the result of the debounce function, it might be more idiomatic to use useMemo here:

  const debouncedSearch = useMemo(() => debounce(async (query: string) => {
    const response = await fetch(`api/search/quotes?query=${query}`);
      if(response.ok) {
        const { results } = await response.json();
        setResults(results);
      }
      else {
        setResults([]);
      }
  },300),[]);

The linter no longer errors with this change.

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!