React: Stateless Functional Components

When creating React components, sometimes we find ourselves in a situation where we are creating large components just to output some HTML. This is usually overkill. Instead, we can use something called a Stateless Functional Component.
A Stateless Functional Component is a component that typically only contains a render method, which returns HTML, and prop types.
// Standard component
class Header extends React.Component {
render() {
return (
<header>
<h1 className="title">{this.props.title}</h1>
</header>
)
}
}
In the example above, we’re outputting a basic snippet of HTML with a single prop. There’s nothing wrong with writing it out that way but we end up writing a bunch of unnecessary code which can make it more difficult to read and bumps up our codes line count.
Follow the example above, first we’ll convert our component into ES5 and then refactor it to ES6.
// ES5
function Header(props) {
return (
<header>
<h1 className="title">{props.title}</h1>
</header>
)
}
An important change to not is on our prop. Since we are no longer using a Class to create the component, the keyword this is no longer used. Instead, we pass props into the function argument Header(props). Very handy for those who find the this keyword to be a bit confusing!
Great, we have our Stateless Functional Component working! There’s more we can do here to make it more readable and whittle down our code a bit.
First, we can turn our function into an arrow function.
// ES6 arrow function
const Header = (props) => {
return (
<header>
<h1 className="title">{props.title}</h1>
</header>
)
}
We can take this further with an implicit return by removing the need for the return keyword. This is possible since, by default, an arrow function will render a return on whatever appears within its parentheses.
// ES6 arrow function implicit return
const Header = (props) => (
<header>
<h1 className="title">{props.title}</h1>
</header>
);
We can take this EVEN FURTHER with Destructuring the props into their own variables. We can add curly braces in the function’s arguments with the name of our prop. Next, we can remove props. from where we print out the prop.
// ES6 Destructuring
const Header = ({ title }) => (
<header>
<h1 className="title">{title}</h1>
</header>
);
If you’re interested in some further reading about Destructuring in ES6, here’s an article I wrote on the basics.
Wrapping Things Up
Stateless Functional Components are a great way to improve our code readability, length, and performance if we know our component will only contain HTML and props.
A pitfall to watch out for would be that if you’re at the start of a project and you don’t know if that component will contain more than props and HTML then it’s best to use a regular component.
However, if you’re at the end of a project or you know for sure the component only needs HTML and props then Stateless Functional Component is the way to go!
Continue Reading
-
CodePen Challenge: Take on Me
This week, our color palette comes from the video for "Take on Me" by a-ha from 1985. The absence of color is a big part of the video but the crossover moments between the comic book world and the real world are filled with moody pastels.
-
5 Tips for Staying Productive While Working from Home
For many of us, myself included, this will be your first experience working away from the office. To help you cope with the change, I've prepared 5 tips for staying productive while working from home.
-
JavaScript ES6: The Basics of Destructuring
Destructuring is one of the most common and important features of ES6. It allows us to extract data from arrays and objects, and assign that data into their own variables. Let's go over the basics!
-
CodePen Challenge: Image Hovers
This week's challenge prompt was to design a hover effect for an image. I created a simple effect that will jiggle the jelly when it is moused over!