React Components: Function Components With Examples

A React component is a JavaScript function that returns JSX: a reusable piece of UI such as a button, a card or a whole page. You use it like an HTML tag, <Profile />, and React calls the function to find out what to put on the screen. Apps are built by putting components inside other components.

function Avatar() {
    return (
        <div
            style={{
                width: 48,
                height: 48,
                borderRadius: '50%',
                background: '#c7d2fe',
                display: 'grid',
                placeItems: 'center',
                fontWeight: 'bold',
            }}
        >
            AL
        </div>
    );
}

function Profile() {
    return (
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
            <Avatar />
            <div>
                <strong>Ada Lovelace</strong>
                <div>Wrote the first published program</div>
            </div>
        </div>
    );
}

export default function App() {
    return (
        <section>
            <h3>Team</h3>
            <Profile />
            <Profile />
        </section>
    );
}

App renders Profile twice, and each Profile renders an Avatar. Change the initials inside Avatar and both profiles update, because they share one definition. Every person in this list is the same right now; the next page, props, shows how to pass each copy its own data.

Writing a component

A function component has two requirements:

1. Its name starts with a capital letter: Profile, not profile.
2. It returns something React can render: JSX, a string, a number, null (render nothing) or an array of those.

function Welcome() {
    return <h1>Welcome back</h1>;
}

// Arrow functions work the same way
const Welcome = () => <h1>Welcome back</h1>;

When the JSX spans several lines, wrap it in parentheses after return. Without them, a return followed by a line break returns undefined, and everything after it is ignored.

Why the name must be capitalized

JSX looks at the first letter of a tag. Lowercase means a built-in HTML element, so <div> stays <div>. Capitalized means "a variable in scope", so <Profile /> calls your Profile function. Name a component in lowercase and React creates an unknown HTML element with that name instead:

function Greeting() {
    console.log('Greeting ran');
    return <span>Hello from Greeting</span>;
}

function greeting() {
    console.log('greeting ran');
    return <span>Hello from greeting</span>;
}

export default function App() {
    return (
        <div>
            <p>Capitalized: <Greeting /></p>
            <p>Lowercase: <greeting /></p>
        </div>
    );
}

The second line shows only its label, and the console only shows Greeting ran. React put an empty <greeting> tag into the page and never called the lowercase function. A development build also warns that The tag <greeting> is unrecognized in this browser; the preview runs like a production build, so you only see the missing text. Rename the function to Greetings and the tag to <Greetings /> to fix it.

Composing components

Components are meant to be nested. A page is a tree: App at the top, then layout pieces, then smaller parts down to single buttons. Each component only knows about the pieces it renders directly, so you can reason about one at a time.

import { useState } from 'react';

function LikeButton() {
    const [liked, setLiked] = useState(false);
    return (
        <button onClick={() => setLiked(!liked)}>
            {liked ? 'Liked' : 'Like'}
        </button>
    );
}

function Post({ title }) {
    return (
        <article style={{ borderBottom: '1px solid #ddd', padding: '8px 0' }}>
            <h4 style={{ margin: '0 0 6px' }}>{title}</h4>
            <LikeButton />
        </article>
    );
}

export default function App() {
    return (
        <main>
            <Post title="Components are functions" />
            <Post title="JSX compiles to function calls" />
            <Post title="State lives in components" />
        </main>
    );
}

Each LikeButton has its own state, so liking one post leaves the others alone. To add a share button to every post, you write it once and add <ShareButton /> inside Post.

When to split a component

There is no fixed rule, but a few signs say a piece deserves its own component: the same markup appears in two places, a section of the JSX has its own state (like the like button above), or the function has grown long enough that you scroll to see its return. Splitting along those lines keeps each component small enough to read in one screen. Splitting too early costs little: a component is only a function, so merging two back together is easy.

Exporting and importing components

The editors here hold one file, but a real project puts components in their own files. A file can have one default export and any number of named exports:

// Avatar.jsx
export default function Avatar({ initials }) {
    return <div className="avatar">{initials}</div>;
}

// Badge.jsx
export function Badge({ label }) {
    return <span className="badge">{label}</span>;
}
export function NewBadge() {
    return <Badge label="new" />;
}

// Profile.jsx
import Avatar from './Avatar.jsx';
import { Badge, NewBadge } from './Badge.jsx';

export default function Profile() {
    return (
        <div>
            <Avatar initials="AL" />
            <Badge label="admin" />
            <NewBadge />
        </div>
    );
}

A default export can be imported under any name; a named export is imported in braces with its exact name. Teams usually pick one style and stick with it. File names commonly match the component: Avatar.jsx exports Avatar.

Keep components pure

React expects a component to behave like a pure function while it renders: the same props and state give the same JSX, and rendering changes nothing that existed before it ran. React may render a component many times, at times you do not control, so a component that edits outside variables during render produces different output each time.

import { useState } from 'react';

let guest = 0;

function ImpureCup() {
    guest = guest + 1;
    return <li>Impure cup for guest #{guest}</li>;
}

function PureCup({ number }) {
    return <li>Pure cup for guest #{number}</li>;
}

export default function App() {
    const [renders, setRenders] = useState(1);

    return (
        <div>
            <ul>
                <ImpureCup />
                <ImpureCup />
                <ImpureCup />
            </ul>
            <ul>
                <PureCup number={1} />
                <PureCup number={2} />
                <PureCup number={3} />
            </ul>
            <button onClick={() => setRenders(renders + 1)}>Render again ({renders})</button>
        </div>
    );
}

The impure cups start at 1, 2, 3. Click the button: nothing about the guests changed, yet the impure list now reads 4, 5, 6, because each render added to the shared guest variable. The pure cups get their number from props and stay correct. In development, Strict Mode renders every component twice to expose exactly this kind of bug; the preview runs like a production build, so here the drift only shows when you render again.

Changing things is fine, just not during render. Update state in event handlers, and talk to the outside world (timers, subscriptions, the document title) in effects.

Components vs elements

The component is the function, Profile. An element is what JSX creates when you write <Profile />: a small object saying "render Profile with these props". React creates elements, calls the components they name, and turns the result into DOM. You never call a component yourself as Profile(); you write <Profile /> and let React call it, so it can track its state and its place in the tree.

That place matters. This example defines a component inside another component, which is a common mistake:

import { useState } from 'react';

export default function App() {
    const [clicks, setClicks] = useState(0);

    function NameField() {
        const [text, setText] = useState('');
        return <input value={text} onChange={(e) => setText(e.target.value)} />;
    }

    return (
        <div>
            <NameField />
            <button onClick={() => setClicks(clicks + 1)}>Re-render App ({clicks})</button>
        </div>
    );
}

Type something, then click the button: your text disappears. Every render of App creates a brand new NameField function, so React sees a different component type in that spot and throws the old one away with its state. Move NameField above App, at the top level of the file, and the text survives every click. The page on rendering explains how React decides what to keep.

Function components and class components

Before hooks arrived in React 16.8, components that needed state were written as classes:

import { Component } from 'react';

class Welcome extends Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

Class components still work in React 19, and you will meet them in older codebases and in error boundaries, which still require a class. New code uses function components with hooks such as useState and useEffect, which do the same jobs with less code. The class components page maps each class feature to its hook.