I have been building React applications for over eight years now. Over time, I have seen the transition from class components to functional components.
One of the most significant shifts for me was adopting arrow functions. They made my code much cleaner and easier to read.
In this tutorial, I will show you how to use arrow functions to create React components. I will also share some tips from my own experience working on large-scale apps.
What is a React Arrow Function Component?
An arrow function component is a way to define a React component using the ES6 arrow function syntax.
It is a more concise way of writing functional components compared to the traditional function keyword.
I personally prefer this method because it handles the lexical scope of this automatically. It also looks much more modern in a JavaScript codebase.
Method 1: Basic Arrow Function Component
This is the most common way I write components today. It is simple and gets the job done.
In this example, we will create a simple component that displays a welcome message for a New York City marathon runner.
import React from 'react';
// Defining a component using an arrow function
const WelcomeMarathoner = () => {
const runnerName = "John Doe";
const city = "New York City";
return (
<div style={{ padding: '20px', border: '1px solid #ddd' }}>
<h1>Welcome to the {city} Marathon!</h1>
<p>Good luck on your run today, {runnerName}!</p>
</div>
);
};
export default WelcomeMarathoner;You can refer to the screenshot below to see the output.
I find this syntax very readable. You define a constant and assign a function to it.
Method 2: Arrow Function with Props
Most of the time, you need to pass data into your components. I always use props for this.
Let’s look at an example of a car insurance quote component for a customer in California.
import React from 'react';
// Using arrow functions with props
const InsuranceQuote = (props) => {
return (
<div style={{ backgroundColor: '#f9f9f9', padding: '15px' }}>
<h2>California Auto Insurance Quote</h2>
<p><strong>Customer:</strong> {props.name}</p>
<p><strong>Estimated Monthly Premium:</strong> ${props.premium}</p>
<p><strong>Coverage Level:</strong> {props.coverage}</p>
</div>
);
};
// Usage Example
const App = () => {
return (
<InsuranceQuote
name="Sarah Smith"
premium={120}
coverage="Full Coverage"
/>
);
};
export default App;You can refer to the screenshot below to see the output.
In my experience, passing props like this keeps the component reusable across different parts of the application.
Method 3: Use Destructuring with Arrow Functions
One trick I use to keep my code even cleaner is destructuring the props right in the function signature.
This saves me from typing props.name every time. It makes the code look much sharper.
Here is an example for a Texas-based BBQ restaurant menu item.
import React from 'react';
// Destructuring props directly in the arrow function
const MenuItem = ({ dishName, price, calories }) => {
return (
<div style={{ margin: '10px 0', borderBottom: '1px dashed #ccc' }}>
<h3>{dishName} - Texas Style</h3>
<p>Price: ${price}</p>
<p>Calories: {calories} kcal</p>
</div>
);
};
const Menu = () => {
return (
<div>
<h1>Austin BBQ House Menu</h1>
<MenuItem dishName="Smoked Brisket" price={18.99} calories={850} />
<MenuItem dishName="Pulled Pork Sandwich" price={12.50} calories={600} />
</div>
);
};
export default Menu;You can refer to the screenshot below to see the output.
I highly recommend this approach. It tells anyone reading your code exactly what data the component expects.
Method 4: Implicit Return in Arrow Functions
If your component only returns a single element and doesn’t have any logic before the return statement, you can use an implicit return.
This means you can remove the curly braces and the return keyword entirely.
Let’s see an example of a simple US Tax Rate display.
import React from 'react';
// Implicit return with arrow function
const TaxRateDisplay = ({ state, rate }) => (
<div className="tax-info">
<p>The sales tax rate in <strong>{state}</strong> is <strong>{rate}%</strong>.</p>
</div>
);
const App = () => (
<div style={{ textAlign: 'center' }}>
<h1>US State Tax Info</h1>
<TaxRateDisplay state="Florida" rate={6} />
<TaxRateDisplay state="Nevada" rate={6.85} />
</div>
);
export default App;I use this for very small “presentational” components. It keeps the file length short and sweet.
Method 5: Arrow Functions with Hooks
Since the introduction of Hooks, functional components have become the industry standard. I use useState and useEffect inside arrow functions all the time.
Let’s build a simple counter for a “National Park Visitor Tracker.”
import React, { useState } from 'react';
const VisitorTracker = () => {
// Using state within an arrow function component
const [visitors, setVisitors] = useState(0);
const incrementVisitors = () => {
setVisitors(visitors + 1);
};
return (
<div style={{ padding: '30px', textAlign: 'center', color: '#2e4d2e' }}>
<h2>Yellowstone National Park Tracker</h2>
<p>Current Visitors at the Gate: {visitors}</p>
<button
onClick={incrementVisitors}
style={{ padding: '10px 20px', cursor: 'pointer' }}
>
Check in Visitor
</button>
</div>
);
};
export default VisitorTracker;In my experience, this pattern is the most robust way to handle local component logic.
Why Use Arrow Functions Over Regular Functions?
You might wonder why I chose arrow functions over the standard function declaration.
Firstly, arrow functions do not have their own this binding. This was a huge pain point in older React versions.
Secondly, they are more concise. Less code usually means fewer bugs and better maintainability.
Finally, it is simply the modern standard. Most React documentation and libraries you find today will use this syntax.
Things to Keep in Mind
While arrow functions are great, there are a few things I’ve learned to watch out for.
Avoid using arrow functions inside your JSX return statement if they are complex. It can cause performance issues during re-renders.
Instead, define the function outside the return and just reference it by name.
Also, remember that arrow function components are anonymous functions. If you don’t use a linter, it might be harder to debug in the React DevTools.
However, if you name your variable (like const MyComponent = …), most modern tools will pick up the name correctly.
Practical Example: A US Flight Search UI
To bring everything together, let’s look at a slightly more complex example.
This component handles state and multiple props using the arrow function syntax.
import React, { useState } from 'react';
// Child component using arrow function
const FlightResult = ({ destination, price, duration }) => (
<div style={{ border: '1px solid #0044cc', margin: '10px', padding: '10px' }}>
<h3>Flight to {destination}</h3>
<p>Price: ${price}</p>
<p>Duration: {duration} hours</p>
</div>
);
// Main Component
const FlightSearch = () => {
const [search, setSearch] = useState("");
const handleSearchChange = (event) => {
setSearch(event.target.value);
};
return (
<div style={{ fontFamily: 'Arial, sans-serif' }}>
<h1>Delta Airlines - Flight Search (USA)</h1>
<input
type="text"
placeholder="Search City (e.g. Chicago)"
value={search}
onChange={handleSearchChange}
style={{ padding: '8px', width: '250px' }}
/>
<div className="results">
<FlightResult destination="Chicago, IL" price={250} duration={2.5} />
<FlightResult destination="Seattle, WA" price={450} duration={5.5} />
<FlightResult destination="Boston, MA" price={180} duration={1.5} />
</div>
</div>
);
};
export default FlightSearch;I’ve used this exact structure for many professional projects. It’s clean, modular, and easy to test.
Using arrow functions in React is a great way to write clean and modern code.
You may also like to read:
- How to Build a React Carousel Component
- How to Convert HTML to React Component
- Cypress React Component Testing
- React Dashboard Component Libraries
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
