React Components

React Components: Reusable Building Blocks for Your UI

React components are independent JavaScript functions that accept input data (props) and return JSX markup. Breaking a page into focused components lets your team develop, test, and reuse buttons, cards, and forms across screens without duplicating layout code.

Writing and Composing Function Components

Every React component name must start with an uppercase letter, such as AlertBanner or PricingTier. Lowercase tag names like <card /> tell React to render a built-in HTML tag instead of calling your JavaScript function.

function StatusPill({ active }) {
  return (
    <span className={active ? 'pill pill-green' : 'pill pill-gray'}>
      {active ? 'Active' : 'Paused'}
    </span>
  );
}

export default function ProjectRow({ title, owner, active }) {
  return (
    <div className="project-row">
      <h3>{title}</h3>
      <p>Owner: {owner}</p>
      <StatusPill active={active} />
    </div>
  );
}

Keeping Components Pure

A pure component produces the exact same JSX output whenever it receives the same props and state. Do not change external variables, mutate props, or fetch network data directly during the render body. Place side effects inside event handlers or useEffect instead.

Organizing Component Files

Keep one primary component per file inside src/components/. Co-locate tiny helper components inside the same file only when no other screen reuses them. Export shared components with clear names so imports stay predictable across large repositories.

Common Component Pitfalls

• Defining Components Inside Other Components: Declaring function Child() inside function Parent() creates a brand-new function reference on every render. React unmounts and remounts the child each time, wiping out its state and input focus.
• Using Lowercase Function Names: Naming a component function userCard() causes React to emit <usercard></usercard> in the DOM instead of executing your function.

Frequently Asked Questions

How small should a React component be?

Split a component whenever it handles more than one distinct UI responsibility or grows past roughly 100–150 lines of readable JSX.

Should I use function components or class components?

Always choose function components for new code. Function components support hooks, produce smaller bundles, and work with React 19 features like Server Components.

Can a component return null?

Yes. Returning null (or false) tells React to render nothing for that component while keeping the rest of the tree intact.