In React 0.14+, you can write stateless components as pure functions called "stateless function[al] components"; in well designed apps, these "pure" components should be the majority of your application and can be tied together by a few "smart" wrapper components that control your state and pass down needed data to the pure components. In this lesson, we walk through the syntax of stateless function components, converting to them from stateless classes, and best practices in using them with stateful (aka "smart") components.
This lesson assumes use of ES6 and JSX.
A stateless function component in React is just a function, so we can create a variable. We'll call this "profile," and we're going to simply store a function inside of that variable.
Now we can view everything in this function as if it were inside of a render method in a React class, so you can just return, directly here, the elements that you want to create. Let's make a "div" here.
We're going to want to have access to the properties that get passed down to this component, so I'll pass in "props" here, and we're going to create an image that represents an avatar of a person. Let's pass in "props.image" here.
Then let's also make a little bio underneath. This is a small bio of the person that we're showing a picture of.
After a quick refresh of the page, we can see that our component is being rendered by the props that were passed to it by its parent component. As you can see, the syntax of stateless function components is very simple.
You have input, and you return output. It's just a function that's pure. It has input and output with no side effects, no mutation, no state.
Because of this, Facebook has suggested that we compose the majority of our React applications with these stateless function components, and then wrap them in container state components that pass down the props for these stateless components.
There's a couple more things that we can do to our component to make the syntax even more clean. We can remove the explicit return in favor of an implicit return.
Remove the curly braces that surrounded that, and unindent what we have inside of our return. We can also remove our explicit calls to props by destructuring the prop's object that comes in.
We can say "image" and "bio" here, and our component is still functioning.
Now let's take a look at another example of refactoring a stateless class component to be a stateless function component. Our component here is called "user list," because it takes in a list of users, an array of users, and it maps over those users and returns a list of their name and the type of account that they have.
Let's say this is like a subscription-type service. Emily has a Pro account, Jason has a Pro account, et cetera. That's what our component looks like. Now let's refactor it to use the stateless function component syntax.
The first thing I'm going to do is go up and replace the class keyword with a variable declaration. We'll store inside of "user list" a function, just like we did with our profile component.
We're going to want to destructure our props into users, because this .props won't exist inside of a stateless function component. We'll remove that here, and then the render method also isn't used in a stateless function component.
We just need to return what we want to render, so I can unindent this here, and remove this extra curly brace. We're missing a semicolon now at the bottom, and our component is rendering.
Just like we did with our profile component, I'm also going to remove the explicit return. I'll remove that, remove this extra curly brace here, and then unindent the rest of this, and our component's still working.
Now that we've gone over the syntax of stateless function components, you might be asking yourself, "When would I use these over an ES6 class or the React create class method?"
I would recommend to use these whenever possible, because they encourage pure components that are simple and stateless. They also will give performance benefits the React team has promised.
That "whenever possible" piece is basically whenever you have a component that doesn't have any state or lifecycle methods, you should be able to convert it to a stateless function component.