The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building stateless function components (new in React 0.14)

Building stateless function components (new in React 0.14)

4:14
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._
Watch this lesson now
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
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?