Code style conventions for components, functions, and destructuring patterns. Activate when writing or reviewing component props, function signatures, or code structure.
On top of ensuring you comply with the Ultracite/Biome linting rules, here are some additional preferred rules.
For component props, always accept a single props variable in the function signature and destructure it afterwards.
type NavbarProps = {
links: string[];
};
function Navbar(props: NavbarProps) {
const { links } = props;
}
Prefer functions over anonymous functions.
For function parameters, prefer a single object parameter with named keys. The function should only take the single parameter in the function signature and destructure it afterwards.
type GetUserOptions = {
userId: string;
};
function getUser(opts: GetUserOptions) {
const { userId } = opts;
return userId;
}
The exception to the destructuring rules is when you are working with an already typed function that is being passed as a parameter. For example it's okay to do the following.
export const Route = createFileRoute("/_with-user/app/")({
component: RouteComponent,
loader({ context }) {
const { user } = context;
return {
user,
};
},
});
loader is already typed with the object so you can just pull out the primary keys from the parameter. All sub-keys should still be destructured.