Clarity at the Point of Use

You come back to code three months later and find this:

export default function Page() {
    return <UserList active={true} archived={false} verified={true} />;
}

What does active={true} mean here? What changes if archived is true? You have to jump to the component definition to decode it. Now compare:

export default function Page() {
    return <ActiveVerifiedUserList />;
}

The second version tells you what's happening at the point where it's happening. No detour required.

The same principle applies to variable names. This tells you the type, but nothing else:

const data = await fetchUsers();

This tells you what you actually have:

const activeUsers = await fetchUsers();

The instinct when naming things is to look at the implementation—read the body, summarize what it does. But the name should serve the caller, not the definition. Code gets read far more often than it gets written, and the reader doesn't have the context you had when you wrote it.

When choosing between short and clear, choose clear.