A React Component

A React component is a reusable JavaScript function that contains its own HTML, allowing you to build and control a specific piece of a user interface (like a button or a profile card) in one place.

The rules that bite

Capitalized names are mandatory

Component names require initial capitalization (e.g., Profile rather than profile). This is a technical requirement, not merely a stylistic choice; React utilizes casing to distinguish between host elements and custom logic. A lowercase tag is interpreted as a standard DOM element (like a 'div'), whereas a capitalized tag indicates a component reference. Consequently, <profile /> is viewed as an unrecognized HTML tag instead of your intended UI piece.

Return a single JSX expression

Return one JSX expression. If the markup spans multiple lines, wrap it in ( … ) so it stays a single returned expression.

Never define a component inside another

Declare components at the top level of the file, never nested inside another component.

Gallery.jsx

//  Bad — Photo is redefined on every render of Gallery
function Gallery() {
  function Photo() {
    return <img src="..." />;
  }
  return <Photo />;
}

//  Good — defined once, at the top level
function Photo() {
  return <img src="..." />;
}

function Gallery() {
  return <Photo />;
}

Easy reason: each time the outer component runs, it builds a brand-new inner function. React thinks it's a different component, so it throws the old one away — DOM and all its state — and rebuilds it from scratch. Why exactly? (hover)React identifies a component by the identity of its function (its "type"). A nested definition creates a new function object on every parent render, so React sees a different type each render. Different type → React unmounts the old subtree (destroying its DOM, resetting its state, and re-running its effects), then mounts a fresh one. Defined at the top level, the function identity is stable, so React reuses the same instance and preserves state.

Define at top level, pass data via props.

It's just normal JavaScript. A function declared inside another is a local binding — rebuilt on every call. Pure JS, no React:

closure.js

function make() {
  function inner() {}
  return inner;
}
make() === make(); // false — a new function object each call

React then decides reuse vs. remount by comparing the component's function reference. A new reference each render reads as "a different component" → remount. Top level = one stable reference = reused, state kept.

Same "new object every render" fact is why inline functions/objects passed as props are unstable each render — exactly what useCallback / useMemo exist to fix. One principle, everywhere in React.

Components nest into a tree

Components render other components, and that nesting forms the UI tree — but a component should only return markup, never be declared inside another.