Recommended Free Tools
A React arrow-function component is an arrow function that returns JSX. Define it, then render it as a JSX element: const Greeting = () => <h1>Hello</h1>; and use it as <Greeting />. React recommends functions for new components, but arrow syntax is a choice—not a requirement.
Define and render an arrow-function component
Components describe parts of a user interface. An arrow function can serve as a function component when it returns JSX:
const Greeting = () => <h1>Hello</h1>;
function App() {
return <Greeting />;
}Use an uppercase name for a component and place it in JSX as <Greeting />. JSX tells React that this is a component to render. Avoid calling it as Greeting() to produce UI; React should call components through JSX so it can manage rendering and component behavior. See React’s guidance on how React calls components and Hooks.
Expression body or explicit return
When the component returns one expression, you can put the JSX after the arrow without braces:
#1 Best Overall
const Greeting = () => <h1>Hello</h1>;For multiple statements, use a block body and an explicit return:
const Greeting = () => {
const message = 'Hello';
return <h1>{message}</h1>;
};A function declaration is another valid way to define a function component; the arrow form is not required by React.
Pass props into the component
Props are supplied as attributes in JSX and received as the component function’s parameter. Destructuring the property you need keeps the code concise:
const Greeting = ({ name }) => <h1>Hello, {name}</h1>;
function App() {
return <Greeting name="Maya" />;
}Here, name is an input to the component. Treat props as read-only: calculate the UI from them rather than changing them. React describes props and state as immutable snapshots, and expects rendering to be pure—calculating UI from inputs rather than performing side effects during render. See React’s purity guidance.
Free tools Windows power users keep installed
One-click scans. No signup required.
Use Hooks in the component body
An arrow-function component can use Hooks just like another function component. For example, useState provides state and a setter:
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
};Call Hooks at the top level of a function component or custom Hook, before any early return. Do not call them inside conditions, loops, nested functions, or event handlers. Those placements can make Hook calls happen in a different order between renders. React’s Rules of Hooks explain the restriction.
Pass event handlers instead of running them during render
An arrow function can also be an event handler. That is separate from using an arrow function to define the component. For a brief, one-off action, an inline handler is convenient:
<button onClick={() => setCount(count + 1)}>Add one</button>For logic you may reuse or that would clutter JSX, define a named handler:
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchBest Value
function SaveButton() {
const handleSave = () => {
saveDocument();
};
return <button onClick={handleSave}>Save</button>;
}In both cases, the event prop receives a function. Writing onClick={handleSave()} calls the function immediately while rendering instead of waiting for a click. React’s event-handling guide shows the difference between passing and calling a handler.
Arrow components and function declarations
Both an arrow-function expression and a function declaration can define a function component. React’s component guidance focuses on using components through JSX; it does not establish that one of these two function syntaxes is faster or universally preferable. Choose a style that is clear and consistent in your codebase.
React’s Component reference says, “We recommend defining components as functions instead of classes. See how to migrate.” This is a recommendation, not a requirement: class components remain supported.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
