What should a component return?
Short answer
A component in React must return JSX - that is, a description of what the interface (UI) should look like.
Or, more precisely:
A component must return a React element - an object that React then converts into real DOM elements.
Example:
function Greeting() {
return <h1>Hello, world!</h1>;
}Here the Greeting component returns JSX,
which React turns under the hood into a call:
React.createElement("h1", null, "Hello, world!");And that call returns a React element, for example:
{
type: "h1",
props: { children: "Hello, world!" }
}React then renders that object into a real <h1> in the DOM.
What exactly can be returned
A component can return:
| Return value type | Example | Description |
|---|---|---|
| JSX | <div>Hello</div> | The standard case |
| React element | React.createElement('h1', null, 'Hello') | Same as JSX |
| Array of elements | [<li>A</li>, <li>B</li>] | Several elements in a row |
| null | return null; | The component renders nothing |
| false / undefined | return false; | Same - outputs nothing |
| Fragment | return <>...</> | Returning several elements without a wrapper |
| Portal | return createPortal(<Modal />, domNode) | Rendering outside the root DOM |
| Text or number | return 'Hello' | React renders it as a text node |
What cannot be returned
Several elements without a common parent:
// Error!
return (
<h1>Heading</h1>
<p>Text</p>
);You need to wrap them:
return (
<>
<h1>Heading</h1>
<p>Text</p>
</>
);Why JSX / a React element specifically?
React does not work directly with the DOM, but with the Virtual DOM - an in-memory virtual representation of the interface. When a component returns JSX, React:
- Converts JSX -> an object (a React element);
- Builds a Virtual DOM out of such objects;
- Compares it with the previous version (diffing);
- Applies minimal changes to the real DOM.
Example: a component that returns nothing
function HiddenMessage({ show }) {
if (!show) return null;
return <p>Secret message!</p>;
}This is normal practice - returning
nullwhen a component should temporarily render nothing.
Summary
| Returns | What it does |
|---|---|
| JSX / React element | Describes what needs to be rendered |
| null / false | Displays nothing |
| Array of elements | Displays several nodes in a row |
| Fragment | Groups elements without extra DOM |
| createPortal | Renders outside the parent |
Main idea:
A component in React must return a description of the interface, not mutate the DOM directly. React itself decides how exactly to display it.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.