Function Components
A component is a JavaScript function that returns JSX.
Syntax
function Name() {
return <p>UI</p>;
}A function component is simply a function whose name starts with a capital letter and which returns JSX. React calls this function to know what to display.
Rules
- The name must be capitalized (
Profile, notprofile) so React treats it as a component, not an HTML tag. - It must return JSX,
null, or an array of elements. - Keep it pure: given the same props it should return the same JSX and not modify things outside itself while rendering.
Example
function Profile() {
return (
<section>
<h2>Ada Lovelace</h2>
<p>First programmer</p>
</section>
);
}
function App() {
return <Profile />;
}When to use it
- A UI library ships every widget as a function component so developers can import exactly what they need without carrying class-based lifecycle overhead.
- A code-splitting strategy lazy-loads feature sections as function components so the initial bundle only includes the minimum code needed for the landing page.
- A Storybook setup documents each function component in isolation, letting designers preview and interact with them without running the full application.
More examples
Minimal function component
Defines the simplest function component: a capitalized function that returns a JSX element.
function WelcomeBanner() {
return (
<div className="banner">
<h1>Welcome to the app!</h1>
</div>
);
}
export default WelcomeBanner;Arrow function component
Shows the concise arrow-function form, commonly used for presentational components with no internal logic.
const StatusChip = ({ status }) => (
<span className={`chip chip--${status}`}>
{status}
</span>
);
export default StatusChip;Component with internal logic
Demonstrates a function component with state and event handling, illustrating how hooks replace class lifecycle methods.
import { useState } from 'react';
function ToggleButton({ label }) {
const [on, setOn] = useState(false);
return (
<button
onClick={() => setOn(prev => !prev)}
aria-pressed={on}
>
{on ? `${label} ON` : `${label} OFF`}
</button>
);
}
Discussion