T
TanStack•14mo ago
rare-sapphire

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

When 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
Should we just never write components inline like this? Functionally it makes no difference. That would be just to appease this rule. Any recommendations?
3 Replies
rare-sapphire
rare-sapphireOP•14mo ago
My reason to write inline components in the first place is because i have a bunch of "small" routes with few lines that i don't want to pull out into individual components.
like-gold
like-gold•14mo ago
I tend to just pull the component out anyways. Plus the React compiler also tends to like it when the component follows the Rules of React.
rare-sapphire
rare-sapphireOP•14mo ago
Got it.

Did you find this page helpful?