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();
}

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();
}

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

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

Similar Threads

Similar Threads

Similar Threads