Components

A React component is a function (or class) that maps props and state to a description of UI. Components should be small enough to reason about, with a clear boundary between presentation and coordination. They compose into trees rather than deep inheritance hierarchies.

Good components accept explicit inputs, avoid hidden globals, and keep side effects out of render. Naming and file colocation help teams navigate large codebases. Interviewers often ask how you split a screen into reusable pieces and where state should live.

					function Greeting({ name, onDismiss }) {
  return (
  <section>
    <h1>Hello, {name}</h1>
    <button type="button" onClick={onDismiss}>Dismiss</button>
  </section>
  );
}
				

On interviews, explain the concept with a concrete example and name the behavior interviewers probe.

Common pitfalls include hiding data flow, over-splitting components, and putting side effects in render.

The trade-off is often clarity versus reuse or explicit props versus convenience.

Checklist:

• One clear responsibility per component.
• Props document the public contract.
• Render stays pure and predictable.