Why is it necessary to capitalize the components name?

In React, capitalizing component names is necessary because it helps distinguish between custom components and HTML elements.

JSX Parsing Rules

1
When JSX is compiled, React uses the capitalization of the tag name to determine whether it is a custom component or a built-in HTML element.
2
Lowercase tag names (e.g., <div>, <span>) are treated as HTML elements.
3
Capitalized tag names (e.g., <MyComponent>) are treated as custom components.
4
If you write <myComponent /> (lowercase), React will look for an HTML element called <mycomponent>, which doesn't exist, and throw an error.

Avoiding Conflicts with HTML Elements

1
HTML elements are case-insensitive and always written in lowercase (e.g., <div>, <p>, <span>).
2
By capitalizing custom component names, you avoid naming conflicts with existing HTML elements.
3
<Button> is clearly a custom component.
4
<button> is an HTML button element.

Babel and Tooling

1
React relies on tools like Babel to transform JSX into JavaScript. Babel uses the capitalization of component names to determine how to process them.
2
If you don't capitalize your component names, Babel might misinterpret them as HTML elements, leading to errors or unexpected behavior.

Difficulty: 3/10

Topics: JSX component naming, React rendering rules, Component conventions

0-2 years experience

1
How would you name a new functional component you are adding to a project, and what would happen if you used a lowercase first letter?
2
If you see a JSX tag that starts with a lowercase letter, how does React interpret it?
3
What error or unexpected output might you get if you try to render a component defined with a lowercase name?

2-5 years experience

1
You added a component called 'profile' and it renders as an HTML element instead of your component. Walk me through how you'd debug and fix it.
2
A teammate renamed a component to start with a lowercase letter and the UI broke. Explain why and how you'd resolve the issue, considering any lint rules.
3
When integrating a third‑party library that exports components with lowercase names, what strategies could you use to avoid naming conflicts?

5-8 years experience

1
Your team is refactoring a large codebase to enforce PascalCase component names. What tooling, lint rules, and migration steps would you put in place to ensure consistency without breaking builds?
2
Discuss any performance or bundle implications, if any, of using lowercase versus uppercase component names in a massive React application.
3
How would you design a code‑review checklist to catch component‑naming violations across multiple teams?

8+ years experience

1
Imagine your organization is moving from a mixed naming convention to a strict uppercase component policy across dozens of micro‑frontends. How would you plan the migration, handle legacy components, and ensure backward compatibility?
2
What governance model would you propose to enforce naming conventions at scale, and how would you measure its impact on developer productivity and bug rates?
3
If a legacy component library uses lowercase names and you need to integrate it into a new codebase that enforces uppercase, what architectural approaches could you take to bridge the gap without extensive rewrites?

❓Can you show a concrete example of a bug caused by using a lowercase component name?
❓How would you enforce the capital‑letter rule in a CI or linting pipeline?
❓What happens if you import a component but reference it with a different case in JSX?