'rules-of-hooks' ESLint rule conflicts with inline route components

When

plugin-hooks/recommended

plugin-hooks/recommended

plugin-hooks/recommended

plugin-hooks/recommended is used, the following code causes an ESLint error:

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

const Route = createRoute({
  component: () => {
    useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks

Should we just never write components inline like this? Functionally it makes no difference. That would be just to appease this rule. Any recommendations?

'rules-of-hooks' ESLint rule conflicts with inline route components

Similar Threads

Similar Threads

Similar Threads