Home/Learn/React/Components and Props

Components and Props

Beginner

Fundamentals

A component is a function taking props and returning UI. Props are read-only inputs, and treating them as read-only is what keeps a React app predictable.

Overview

A component is an ordinary function: props go in, described UI comes out. The discipline that makes this work is purity — for the same props, a component must render the same thing, and it must not modify its inputs. React relies on that to decide what to re-render, and breaking it produces bugs that appear only sometimes. The other early skill is knowing when to split a component, which is less about line count than about how many distinct reasons the thing has to change.

Props In, UI Out

Destructure props in the signature, give defaults there, and never write to them.

Destructure, default, never mutate

function ProblemCard({ problem, locked = false, onOpen }) {
  return (
    <article onClick={() => onOpen(problem.slug)}>
      <h3>{problem.title}</h3>
      <Difficulty level={problem.difficulty} />
      {locked && <ProBadge />}
    </article>
  )
}

<ProblemCard problem={p} onOpen={open} />          // locked defaults to false
<ProblemCard problem={p} locked onOpen={open} />   // shorthand for locked={true}

// Props are read-only. This is a bug, not a shortcut:
function Bad({ items }) {
  items.sort()                     // mutates the parent's array
  return <List items={items} />
}
function Good({ items }) {
  const sorted = [...items].sort() // copy first
  return <List items={sorted} />
}

children and Composition

children is the prop that makes React composable. Reach for it before adding another boolean.

children and JSX-valued props

function Panel({ title, children, footer }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </section>
  )
}

<Panel title="Hints" footer={<UpgradeLink />}>
  <p>Try a hash map.</p>
</Panel>

// Any prop can take JSX — "slots", without a special API:
<Layout sidebar={<Nav />} main={<Results />} />

// Composition beats configuration. When a component grows
// showHeader, showFooter, isCompact, variant, hideIcon…
// that is the signal to pass children instead of more flags.

When to Split

Not by line count. Split when a piece has its own reason to change, its own state, or is used twice.

And never nest a component definition

// Good reasons to extract a component:
//   - it is used in more than one place
//   - it owns state nothing else needs (an open/closed toggle)
//   - it re-renders on a different cadence (a live timer in a static page)
//   - the parent has become hard to read as one unit

// Bad reasons:
//   - "the file is over 100 lines"
//   - a wrapper that only forwards every prop unchanged

// Never define a component inside another component:
function Parent() {
  function Row() { ... }        // NEW function identity every render
  return <Row />                // React unmounts and remounts it,
}                               // losing its state and its DOM focus

// Define it at module level and pass props instead.

Key Points to Remember

1A component is a function from props to UI, and must be pure for the same props
2Props are read-only — copy before sorting or mutating, or you corrupt the parent's data
3children makes composition the default; prefer it to accumulating boolean flags
4Split a component when it has its own state, its own reason to change, or a second usage
5Defining a component inside another component remounts it every render, losing state and focus

Interview Questions

Why must a component not modify its props?

Easy

What is the children prop and why is composition preferred over configuration flags?

Medium

What goes wrong if you define a component inside another component?

Hard

Ask Aria about Components and Props

Your personal AI tutor — ask anything about this concept

Revision Status

Personal Notes

Discussion

Loading discussion…

JSX — Markup That Is Really JavaScript

Lists and Keys