Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building stateless function components (new in React 0.14)

4:14 React lesson by

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.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Amit

Thanks Trevor! Really excited about this!! Don't enjoy the heavy use of "this" in React.

Anyway, you mention this applies starting in React 0.14. What about React Native?

Also, can you point to any examples of the "smart" wrapper components that control state? If data requirements are more isolated does using these reduce the reliance on flux style architectures to manage state?

In reply to egghead.io
Avatar
Trevor

Hey Amit! It made me super happy to get your comment and hear that you liked the video/topic.

"Can you point to any examples of the "smart" wrapper components that control state?"

I just made a gist for you which shows a single "smart" component that uses two stateless function components.

For more information about this, one of the Egghead instructors - Dan Abramov - wrote a great article that sums up and links to more information about this.

"What about React Native?"

tl;dr React Native works the same way :)

The awesome thing about React 0.14+ is that the React team broke out the core platform agnostic pieces of React into the react package, and then placed the platform specific code inside of their own packages (ie react-dom, react-native etc.). This means that as long as you are using the latest react and react-native packages, you can use stateless function components :)

Hope this helps. Let me know if this makes sense or if you have any questions about it :)

In reply to Amit
Avatar
Trevor

It looks like React Native currently has problems with stateless function components: https://github.com/facebook/react-native/issues/4023. I'm sure they will fix it soon and if you are reading this comment it may already be fixed.

In reply to Trevor
Avatar
Dan

I've an React application that I'm planning to update with stateless function components.

I'm wondering about the usage of const = () => over simply function(). Please can you elaborate?

Avatar
Joel

I've an React application that I'm planning to update with stateless function components.

I'm wondering about the usage of const = () => over simply function(). Please can you elaborate?

It's ES6 Arrow function syntax. It would be a matter of personal preference in this case. Personally I use the function approach for my function components.

In reply to Dan
Avatar
Trevor

Hi Dan! Yes, as Joel said, () => is an ES6 (aka ES2015) arrow function that doesn't really have to do with React; you can learn more about them from the "Arrow Function" Egghead lesson in the ES6 lesson category: https://egghead.io/lessons/arrow-function

In reply to Dan
Avatar
Dan

Thanks Joel and Trevor, I guess that I should have told that I knew that => function syntax was added with ES2015, but my question was about the usage of const MyComponent = ({props}) => instead of function MyComponent(props). Any benefit for using const instead of exporting a function?

In reply to Trevor
Avatar
Trevor

Dan,

"my question was about the usage of const MyComponent = ({props}) => instead of function MyComponent(props). Any benefit for using const instead of exporting a function"

In terms of React, you can do either. In terms of plain JavaScript, it depends on if you want a "Function Expression" or "Function Declaration" (export const MyComponent = function {} vs export function MyComponent() {}). To learn more about these, see http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname.

The use of const in this situation would work similar to var, but it makes the function reference immutable. To learn more about const, see the "const declarations in ES6" lesson on Egghead: https://egghead.io/lessons/ecmascript-6-const-declarations-in-es6-es2015

Another important thing to understsand about the examples you referenced: {someProp} in the function argument lets you "destructure" props.someProp into the someProp variable. Your example of {props} would actually throw an error, since props is already the parent object. To learn more about destructuring, see the "Destructuring Assignment" egghead lesson: https://egghead.io/lessons/ecmascript-6-destructuring-assignment

Bottom line: I would suggest reviewing the JavaScript, and especially the ES6 lessons on Egghead as I think it will make these differences more clear. Most of React (like the question you are referring to), is just vanilla JavaScript. I've found that for me, learning more about JavaScript helps me better understand how React works - since most React examples have very little "React" specific things in them.

Hope this helps!

In reply to Dan
Avatar
Trevor

Also, the official documentation about "Stateless function components" from the 0.14 release notes may be helpful to read through: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

In reply to Dan
Avatar
Dan

Thanks, Trevor. The answer that I was looking for can be found in the blog post http://www.unicodegirl.com/function-statement-versus-function-expression.html. It is very a nice explanation of function statement versus function expression.

In reply to Trevor
Avatar
Dan

Amit,
You might this useful https://github.com/urbanvikingr/todo.
It is the code from the video series Getting Started with Redux by Dan Abramov here on egghead.io divided into modules.
Best, Dan

In reply to Amit

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.



HEY, QUICK QUESTION!
Joel's Head
Why are we asking?