What are the two main ways to define a component in React?

WHAT THIS TESTS: This question checks whether you can articulate the two primary component paradigms in React and write syntactically correct minimal examples from memory. For a senior candidate, the interviewer cares less about the syntax itself and more about whether you understand that function components are the modern React 19 standard while class components are still valid and prevalent in legacy codebases. It also tests JSX literacy, capitalization rules, and whether you know the minimal API surface for each type.

A GOOD ANSWER COVERS: Four things in order. First, identify the two main ways as function components and class components. Second, provide a function component example such as function Hello() { return <h1>Hi</h1>; } or an arrow function equivalent, emphasizing that the name must start with a capital letter. Third, provide a class component example such as class Hello extends React.Component { render() { return <h1>Hi</h1>; } }, explicitly including the render method because classes require it. Fourth, contextualize by stating that function components are now the default for new development because they support Hooks and align with React 19 architecture, but class components are not deprecated and seniors often maintain them.

COMMON WRONG ANSWERS: Several patterns signal inexperience. Offering function declarations versus arrow functions as the two main ways misses the point entirely; those are both function components. Forgetting the render method in a class component is a syntax error that breaks React. Returning multiple top level elements without a fragment in either example shows poor JSX hygiene. Claiming that class components are deprecated or removed in React 19 is factually wrong. Failing to capitalize the component name is a basic mistake that causes React to treat it as a DOM tag.

LIKELY FOLLOW-UPS: An interviewer might ask when you would still use a class component today. The honest answer is rarely for new code, though you may encounter them in older codebases. They might ask how state or side effects differ between the two, which lets you discuss Hooks versus lifecycle methods. They might also ask about converting a class to a function, testing differences, or performance characteristics.

ONE CONCRETE EXAMPLE: Function component: function Hello() { return <h1>Hello</h1>; } export default Hello; Class component: import React from 'react'; class Hello extends React.Component { render() { return <h1>Hello</h1>; } } export default Hello; Both render an h1 tag and satisfy the minimal requirement, but the function version is what you would write in a greenfield React 19 application.