I just thought I'd clear something up that I commonly see in React projects:

 

The use of ES6 class for component creation. But did you know you can create components with just a function?

import React from 'react';

const Todo = ({ title }) => <div>{title}</div>;

export default Todo;

This is what is commonly referred to as a presentational or dumb component, it just takes some props and renders to the screen. It can also handle user actions/events by passing in a callback as a prop:

import React from 'react';

const Todo = ({ title, handleTodoClick }) => <div onClick={handleTodoClick}>{title}</div>;

export default Todo;

To handle the click we'd typically then wrap this todo component in what is known as a container component using the Higher Order Component pattern or HOC.

This is where you would use a class (If we're using React state and not a Flux implementation like Redux)

import React, { Component } from 'react';
import Todo from './Todo';

class TodoContainer extends Component {
  super();
  constructor() {
    this.state = {
      completed: false
    };
   
    this.handleTodoClick = this.handleTodoClick.bind(this);
  }
  
  handleTodoClick() {
    this.setState({
      completed: !this.state.completed
    });
  }

  render() {
    const title = { this.props };
    return <Todo title={title} handleTodoClick={this.handleTodoClick} />;
  }
}

export default TodoContainer;

The only other occasion you'd want to use a class is when you're using one or more of React's lifecycle hooks such as ComponentDidMount, ComponentWillUpdate and so on.

It's important when scaling a React application to be splitting out your concerns like this, keeping your presentational components pure and thus deterministic.

In most of my work I make heavy use of Redux for state management, this completely negates the need for using React state. That's a big topic all in itself, but it avoids all that nastiness you see above that you get with ES6 classes.

 

import React from 'react';
import { connect } from 'react-redux';
import { toggleTodo } from './actions';
import Todo from './Todo';

const mapDispatchToProps = dispatch ({
  handleTodoClick(id) {
    dispatch(toggleTodo(id));
  }
});

export default connect(undefined, mapDispatchToProps)(Todo);

I won't go into great detail to explain this, but the short story is the React-Redux package provides a connect() function that creates a Higher Order Component (HOC) that allows us to abstract out component logic like you see above. It returns a function that accepts your presentational component as an argument (known as currying).

I just thought I'd bring this up as it's something I see very commonly in React projects.

Edited January 7, 20179 yr by rbrtsmith

Create class is on the way out apparently, which is a shame because I use that method or stateless functional components (I believe that's the name).

I prefer the way Inferno handles functional components, you can pass lifecycle hooks to them, so you can use functional components entirely if you don't need to set state.

Inferno.render(<FunctionalComponent onComponentDidMount={ mounted } />, document.getElementById('app'));

I plan on doing more with React this year, I haven't even really looked much at state management like Redux. There are also a couple API compatible libraries out like Preact and Inferno that look really good, and fiber is out this year at some point. Interesting times ahead.

I've not touched Inferno, looks interesting though. From what I've read it seems the React team plan to make React more functional in the future, which I very much like the sound of (Shouldn't need "class" for lifecycles/state). Fibre shouldn't change the consumer API much, if at all. It's pretty much a re-write under the hood to further improve performance, especially around animations.

 

Preact is just a stripped down version of React that removes a lot of functionality. It can be worthwhile if your app is not using those features. That said with React if you set your Node_Env correctly for deployment Webpack will strip out a lot of the dev functionality from your React bundle (Things like PropTypes) that will make things considerably smaller.

I highly recommend you checkout Redux, it's a great way of managing state, especially over time which can become very difficult with other solutions - I'm looking at you MVC! It's worth noting that while Redux is very popular within the React community, it is not dependant upon it. You can use Redux with whatever framework you desire or without one entirely.

Some useful (free) Redux Resources
Getting started with Redux: https://egghead.io/courses/getting-started-with-redux
Idiomatic Redux https://egghead.io/courses/building-react-applications-with-idiomatic-redux (Builds on the course above)

Edited January 9, 20179 yr by rbrtsmith

Create class is on the way out apparently, which is a shame because I use that method or stateless functional components (I believe that's the name).

 

I prefer the way Inferno handles functional components, you can pass lifecycle hooks to them, so you can use functional components entirely if you don't need to set state.

Inferno.render(<FunctionalComponent onComponentDidMount={ mounted } />, document.getElementById('app'));

I plan on doing more with React this year, I haven't even really looked much at state management like Redux. There are also a couple API compatible libraries out like Preact and Inferno that look really good, and Fibre is out this year at some point. Interesting times ahead.

 

As I pointed out in the original post you don't need createClass for presentational / stateless components, if you see the example below this illustrates:

 

const Title = React.createClass(props) {
  const { text } = this.props;
  render() {
    return <h1>{text}</h1>;
  }
};

is equivalent to

 

const Title = ({ text }) => <h!>{text}</h1>;

Edited January 9, 20179 yr by rbrtsmith

I've used them before, the majority of components I create end up being stateless functions, but they don't allow set state, which is fine if you use Redux but not every app requires it. Sometimes CreateClass is needed in this case.

 

From what I understand they also aren't as beneficial for performance because they always get re-rendered, with CreateClass you can use shouldComponentUpdate, but in the future, functional components will have hooks or behind the scenes optimisations made, I think Fiber will do a lot to help with this. Again, if a component needs this behaviour then CreateClass seems fine to use to me.

Functional components don't get rendered any more than classes. A functional component will only re-render when it's props change.

Shouldn't use createClass at all now by the way, it's been deprecated some time ago (end of 2015).

The accepted rules in the community are only use a class if you need to setState or access a lifecycle hook. This article https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc#.uf3jx2vcc goes into why functional components should be used whenever possible.

 

If you want a component to have state then wrap it with a Higher Order Component (container) and separate out your container from your presentational components. This is exactly what connect() from React-Redux does.

Edited January 9, 20179 yr by rbrtsmith

I thought it was only class components that support PureRenderMixin (the component will re-render when props change) but stateless functions do not, so they re-render every time regardless of whether props have changed.

 

I had no idea CreateClass was deprecated, it seems a shame that ES6 classes are what React settled on for components, I don't feel like it's a nice route mainly because of the additional noise. I like the way Inferno does stateless functions, you can pass lifecycle events as props, so you can use them everywhere.

It was a wise decision from them because it's better to follow a standard JavaScript type than create yet another abstraction. Also Mixins have long since been depreciated again since early 2015 - take a read of this https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

 

Like the article states, it's good that they have been removed in favour of composition via HOC - that article explains quite well how HOC's work.

 

I hope soon they go to pure functional components because I see ES6 class as a general anti-pattern anyway. It's just sugar over the constructor/new syntax which doesn't really leverage the power of JavaScript's OLOO style of OO.

Edited January 9, 20179 yr by rbrtsmith