This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Creating a Stateless Functional Component in React

3:11 React lesson by

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.


egghead.io comment guidelines

Avatar
egghead.io

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

Avatar
Tey

I know this is on the frontier, but for now, while hot reload 3 is being worked on, have you found a way to have the stateless 'non-extended' components play nice with hot reload (aka trigger the expected code refreshes). I fully embrace the simplicity of this syntax when you don't need react methods, but the constant browser refreshing... the horror... the effort...

In reply to egghead.io
Avatar
Josh Black

I know your pain! I went through the exact same thought process when I first started using them, and actually ended up sticking to the Class variation as a result for a while.

Thankfully, the work being done on react-hot-loader@^3.0.0 is relatively stable, and so in more recent projects I've been adding the newest version of the loader in order to get hot module replacement for stateless components. The setup involves around 3 steps, adding RHL to your webpack config, your babel config, and then inside of your application itself when you use the new AppContainer component to register your application.

Hope this helps!

In reply to Tey

A common way to build components in React is to extend off of the React.Component subclass. In our case, I have this component called app that's rendering a component called title, and passing in a prop called value.

Title is just a component that returns an H1 tag, and just passes in the value prop in as its content. This whole thing is being rendered using React DOM's render method. We're just going to pass in that app component that I had defined up above.

We're going to target the ID of root that's just in my HTML document. One thing we might notice after we write out more and more React components is that most of our components will actually be stateless.

This just means that we'll have a lot more components that might look like this title component up above, where it will take in some kind of props, and then the component will choose how it wants to be displayed.

React introduced a simpler syntax for these kinds of components, calling them stateless functional components. That functional bit means that our components are defined as just a function. In our case, we can change this title component now, and turn it into an arrow function expression.

This function is just going to take in props as an argument. We can actually have it return the same thing in the return statement in our original title render method. We can just go and have the H1 tag. Instead of doing this.props.value, now we'll do props.value, and we're good.

Let's go and change the value here for the value prop, run the example, and we can see that it works exactly the same as that original title component. The stateless bit now in that whole stateless functional components phrase just means that we lose access now to all of the life cycle methods that we're used to using while extending off of the React.Component subclass.

The most important one is that we no longer can use this.setstate. As a result of this, our components are now just this result of the input props that we actually provide them. However, we still have access to things like prop type validation, and also default props, but specifying the members on the title function itself.

Here, I can just add title.proptypes, and we can go and validate the value prop type the same way we would in a typical React class component. We can do the same thing now with default props by doing title.defaultprops, and then giving a default value now for the value prop.

Now we have a complete example of a stateless functional component in React.

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