Understanding React component scaffolding
A typed props interface, a function, an export.
The shape of a modern React component, what the generator decides for you, and the conventions that are unambiguously correct in 2026.
Function components, end of story.
React 16.8 (2019) introduced Hooks; class components have had no advantage since. New components in 2026 are functions. The class form still works for legacy code; nobody writes new ones. A modern component is a TypeScript function taking a props object, returning JSX. Hooks supply state, side effects, refs.
Props typing — interface vs type.
Both work. interface UserProps is extensible (declarations merge); type UserProps is flexible (unions, intersections, mapped types). For component props specifically, either is fine; pick one and use it across the codebase. Modern Tailwind/Next-style projects lean toward type for the consistency with utility-types elsewhere; React's own source uses both interchangeably.
A worked component.
A typed Button: type ButtonProps = {
children: React.ReactNode;
variant?: "primary" | "secondary";
onClick?: () => void;
disabled?: boolean;
};
export function Button({
children,
variant = "primary",
onClick,
disabled = false,
}: ButtonProps) {
return (
<button onClick={onClick} disabled={disabled} className={variant}>
{children}
</button>
);
} Required: children. Optional: variant (literal union, prevents typos), onClick, disabled. Default values via destructuring. Named export. The shape every generator should emit.
Required + optional + defaults
children required ; variant optional with default ; onClick optional
The three shapes of a useful prop.
React.ReactNode + 'primary' | 'secondary' + default = 'primary'
= Typed and ergonomic
Named vs default export.
Named export (export function Button) is the modern default. Reasons: refactor-friendly (renaming via the IDE updates every callsite); auto-import-friendly (the IDE knows the symbol's name); explicit imports (import { Button } is clearer than import Btn from ".../Button"). Default exports linger in Next.js pages (where the framework conventionally expects them) and a few legacy patterns. New components: named exports.
The forwardRef-vs-not decision.
If the component might need to expose its DOM node to a parent (focus management, scroll-to-element, integration with libraries that need refs), use React.forwardRef. For most components — visual containers, layout primitives, page sections — no ref is needed. React 19 (2024) simplified this: ref can be a regular prop on function components, no forwardRef wrapper needed. Generators that target React 19+ should emit the simpler form.
What scaffolding can't decide.
A generator emits structure: the props interface, the function signature, the file location. It can't decide the component's job — what it renders, what state it owns, what events it fires, what accessibility attributes it carries. Treat the generator output as a clean starting point that saves 30 seconds of typing; the actual design work happens after.