Why Component naming rules in React? - Purpose & Use Cases

The Big Idea

What if a tiny naming rule could save you hours of debugging in React?

The Scenario

Imagine building a React app where you name components randomly, like button, header1, or mycomponent. You try to use them, but React doesn't recognize some as components, and your app breaks silently.

The Problem

Without clear naming rules, React treats lowercase names as HTML tags, not components. This causes bugs that are hard to find. Your code becomes confusing and inconsistent, making teamwork and maintenance painful.

The Solution

React requires component names to start with a capital letter. This simple rule helps React know which parts are custom components and which are standard HTML. It keeps your app stable and your code easy to read.

Before vs After

✗ Before

function button() { return <button>Click</button>; }

✓ After

function Button() { return <button>Click</button>; }

What It Enables

Following component naming rules lets React correctly render your components and keeps your code clear and bug-free.

Real Life Example

When working on a team project, everyone names components with capital letters like Header and Footer. This makes it easy to spot components in code and prevents errors during rendering.

Key Takeaways

React components must start with a capital letter.

Lowercase names are treated as HTML tags, causing bugs.

Proper naming improves code clarity and app stability.