Component Anatomy and Typing

## What a component actually is Strip away the syntax and a React component is a function from inputs to a description of UI. The inputs are its props, plus whatever it reads from state and context; the output is React elements — plain JavaScript objects that describe what should appear on screen. Elements are not DOM nodes. React calls your component, receives that description, compares it with the previous one, and takes sole responsibility for touching the DOM. Everything else about the word "component" is authoring style layered on top of that one idea. One mechanical rule follows from it: a component used in JSX must be referenced by a capitalized name (or a dotted path like `Menu.Item`). A lowercase name in JSX is treated as a built-in DOM tag, which is why `<greeting />` renders an unknown HTML element instead of calling your function. ## The function form ```javascript function Greeting({ name, children }) { return ( <section> <h1>Hello, {name}</h1> {children} </section> ); } ``` A function component takes exactly one argument — the props object. `children` is an ordinary prop. In React 19 `ref` is an ordinary prop too, so a function component can accept a ref without `forwardRef`. State comes from `useState` or `useReducer`, synchronization with external systems from `useEffect`, shared data from `useContext`. The function body runs on every render, top to bottom, and every local variable inside it is recreated each time. ## The class form ```javascript class Greeting extends React.Component { state = { open: false }; render() { return <h1>Hello, {this.props.name}</h1>; } } ``` A class component is instantiated by React once per mounted position in the tree. That instance persists across renders and holds `this.props`, `this.state` and `this.setState`. `render()` is the only required method; the lifecycle methods are optional hooks into mount, update and unmount. `defaultProps` and `contextType` are class features that still work. ## The differences an interviewer is probing **Instance versus closure.** A class has an object identity that survives renders, so `this.props` is a live reference that always yields the newest values — even inside an asynchronous callback scheduled several renders ago. A function component has no instance; each render is a separate call whose variables are captured by any closure created inside it. That is why a `setTimeout` in a function component sees the props from the render that created it, and the same code in a class sees the latest. Neither is a bug; they are different capture semantics, and knowing which you are in is the point. **Hooks are function-only.** Hooks are dispatched from the currently rendering function component, so they cannot be called in a class body or in `render()`. A class needing hook-only behaviour has to be wrapped by a function that reads the hook and passes the result down as a prop. **Ceremony.** Classes require binding handlers or class-field arrow functions to keep `this`, and they scatter one concern across several lifecycle methods. Functions keep a concern in one place. ## What only classes can still do Error boundaries. There is no hook that catches a rendering error from the subtree below; the API is `static getDerivedStateFromError` (to render a fallback) and `componentDidCatch` (to log). Real codebases keep one small class for this, or use a library that wraps one. That is the honest answer to "is anything class-only left" — and it is the only such item worth naming. ## Why functions became the default Because logic reuse works. Extracting a piece of stateful behaviour from a function component into a custom hook is a copy-paste of the hook calls; extracting the same thing from a class historically meant a higher-order component or a render prop, both of which distort the tree. The React Compiler also targets function components written to the Rules of React, so the modern optimization story assumes this style. Classes still render fine, they are still supported, and reading them is a required skill — but you should not present one as the way you would write new code.