Suggest an edit

Improve this article

Refine the answer for “What should a component return?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

```javascript
function Greeting() {
  return <h1>Hello, world!</h1>;
}
```

Here the `Greeting` component returns **JSX**,
which React turns under the hood into a call:

```javascript
React.createElement("h1", null, "Hello, world!");
```

And that call returns a **React element**, for example:

```javascript
{
  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:

```javascript
// Error!
return (
  <h1>Heading</h1>
  <p>Text</p>
);
```

You need to wrap them:

```javascript
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:

1. Converts JSX -> an object (a React element);
2. Builds a Virtual DOM out of such objects;
3. Compares it with the previous version (diffing);
4. Applies minimal changes to the real DOM.

---

## Example: a component that returns nothing

```javascript
function HiddenMessage({ show }) {
  if (!show) return null;
  return <p>Secret message!</p>;
}
```

> This is normal practice - returning `null`
> when 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts468 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.