T
TanStack•2y ago
rare-sapphire

route.useSomething() and eslint(react-hooks/rules-of-hooks)

is it ok to do this: 
const route = new Route({ /* etc */ });
const { useLoaderData } = route;

const Component = () => {
  const data = useLoaderData();
}
const route = new Route({ /* etc */ });
const { useLoaderData } = route;

const Component = () => {
  const data = useLoaderData();
}
instead of this? 
const route = new Route({ /* etc */ });

const Component = () => {
  const data = route.useLoaderData();
}
const route = new Route({ /* etc */ });

const Component = () => {
  const data = route.useLoaderData();
}
(same question for other route.useSomething hooks). the latter option is what i'm seeing in the docs, but you'll miss out on rule-of-hooks eslint warnings if you do it that way. looking at the source code, the former option should have the same behaviour right now, but I want to avoid any unexpected breaking changes if the API isn't supposed to be used this way 😅
1 Reply
foreign-sapphire
foreign-sapphire•2y ago
It might be okay Try out If you get this is undefined, then it’s not okay. If that’s the case, I’ll provide a non class implementation

Did you find this page helpful?