Rules Hub

Coding Rules Library

← Back to all rules
frontend ruleStack: react
react-routerremixtypescriptclean-codehooks

Prefer single inferred useLoaderData call

Avoid calling useLoaderData multiple times or manual casting to merge types; rely on automatic type inference.

PR: Feat/FCK-2245 - Cache Bellsheep and profile loaders with TanStack Query #343Created: Dec 10, 2025

Bad example

Old codetsx
1export default function UserProfile() {
2 // BAD: Calling hook twice to hack type merging
3 const data = {
4 ...useLoaderData<typeof loader>(),
5 ...useLoaderData<LegacyType>(),
6 };
7
8 return <div>{data.name}</div>;
9}

Explanation (EN)

Calling useLoaderData multiple times creates redundant runtime execution solely to satisfy TypeScript. It implies a misunderstanding of the data flow or type system.

Objašnjenje (HR)

Višestruko pozivanje useLoaderData stvara nepotrebno izvršavanje u runtime-u isključivo kako bi se zadovoljio TypeScript. To ukazuje na nerazumijevanje protoka podataka ili sustava tipova.

Good example

New codetsx
1export default function UserProfile() {
2 // GOOD: Single call with proper inference
3 const data = useLoaderData<typeof loader>();
4
5 return <div>{data.name}</div>;
6}

Explanation (EN)

Using a single hook call with `typeof loader` allows the framework to correctly infer the return type, ensuring zero runtime overhead and a single source of truth for types.

Objašnjenje (HR)

Korištenje jednog poziva hook-a uz `typeof loader` omogućuje frameworku da ispravno zaključi povratni tip, osiguravajući nulti runtime trošak i jedan izvor istine za tipove.