Choose variable, function, and type names that clearly communicate their purpose and context. Prioritize readability and semantic meaning over brevity.
Key principles:
State
instead of S
, handlerContext
instead of context
)__ReactRouter_SerializesTo
instead of $__RR_SerializesTo
)navigationType
to match useNavigationType
hook)Example from codebase:
// Before: Generic and unclear
let context = await loadRouteData(...)
// After: Specific and descriptive
let handlerContext = await loadRouteData(...)
// Before: Cryptic prefix
export type SerializesTo<T> = {
$__RR_SerializesTo?: [T];
// After: Clear, readable prefix
export type SerializesTo<T> = {
__ReactRouter_SerializesTo?: [T];
This approach reduces cognitive load for developers and makes code self-documenting, especially important in large codebases where context switching is frequent.
Enter the URL of a public GitHub repository