For the last week I have been learning React and since it is such a bleeding edge technology it has been hard determining which best practices I should be using. I imagine other React beginners will also have this issue too and by the end of this post I hope I will have cleared up any confusion surrounding creating components in React.
There are numerous ways to create components in React and choosing which method to use isn’t always clear. Before choosing which method to use when creating a component, we must first look at the two different types of components your application should contain.
Smart (Container) vs. Dumb (Presentation) Components
Your application build with React should contain two types of components, Smart or Dumb, depending on the situation.
Smart Components should be used when you need access to state, need to use Lifecycle Methods, or need to pass data down to child components. You typically want to house your application logic in Smart Components and thus should contain little to no JSX markup in them.
Dumb Components on the other hand should house all of your application styling. Thus, they should consist mainly of JSX markup and only receive data and actions via props. You should not be using state in your Dumb Components.
In short, Dumb Components take care of how things look and Smart Components take care of how things work.
Now, let’s look at the various ways we can create both Smart and Dumb Components.
Smart Component Creation
There are two popular ways to create Smart Components.
1. ES5 Create Class Component
The previous should be used when you want to create a Smart Component and you are not using ES6. If you are using ES6 (which I hope you are) you should instead use native ES6 classes to create your Smart Component like so.
2. ES6 Create Class Component
Whoa! Constructor, what the hell is that? Super(props), oh, ok that actually sounds pretty cool. There’s a lot going on here so I broke down what changed in the comments.
Dumb Component Creation
If you are creating Dumb Components you shouldn’t need access to state and thus can use stateless functions.
Stateless functions allow you to get more done with less lines of code, will also see performance boosts in future versions of React, and the React documentation even recommends you should use stateless functions whenever possible:
In an ideal world, most of your components would be stateless functions because in the future we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.
Note: There may be instances when you need to use Class Components for Dumb Components, but whenever possible, stick to using stateless functions.
There are again two popular way to create stateless functions in react
1. ES5 Stateless Function
First, let’s assume we re-wrote our ES5 Smart Component like this:
Count would be a stateless function that would look like the following:
Now let’s look at how we would do this using ES6 stateless functions.
2. ES6 Stateless Function
Again, let’s assume we rewrote our ES6 Smart Component like this:
Here’s what Count would look like using ES6:
That’s a nice looking stateless function and notice we didn’t even need to use ‘this’.
Now that we’ve looked at the different types of components (Smart and Dumb) and the different ways you can create them (state and stateless) let’s wrap things up.
You should use Smart (Container) Components to define how things work in your app and Dumb (Presentation) Components to define how things look in your app.
If you are using ES6, use you will most likely need to use native classes to create your Smart Components and ES6 stateless functions for your Dumb Components.
If you are still using ES5, then you will most likely need to use React.createClass() for your Smart Components and ES5 stateless functions for your Dumb Components.
Hope that cleared up React components for you and check back soon for another post about React.