Stateless Functional Components new in React 0.14

React version 0.14 was recently released and introduced some breaking changes as well as a few new features worth pointing out.

One of the most common things you can (and should) do in React is create many Components.  In theory, your entire app is just comprised of a ton of Components that are stacked, nested, and children of parents etc.  Sometimes these Components are complex but mostly they are fairly trivial that just need to receive some props and render some HTML.  In the event of the latter, you can now create quick and easy “disposable” (or ad hoc) Components using a sort of shorthand syntax.

Before:
Screen Shot 2015-10-16 at 10.15.50 AM

After:
Screen Shot 2015-10-16 at 10.16.15 AM

The first thing to note is that we no longer need to worry about defining propTypes. The second is that we’re using ES6 destructuring in the main parameter – as typically props is the default parameter of the function. Theres no state in these “Stateless” Components (obviously) so we don’t have to worry about most of the lifecycle of the Component because all we want it to do is render the props given. Given that, theres also no render method defined, as its assumed.

Stateless Functional Components won’t be the right solution for all of your needs, but there will definitely be times where you quickly want to compose a Component and don’t want to have to worry about the unnecessary boilerplate that’s typically required!

Note: My apologies on using images for the code snippets – but WordPress was stripping out the Component HTML tags in the code blocks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s