Alternative ways to define react Components

0. intro.md

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is that when reconciling updates to props, new instances aren't created props is jsut set to the next props.

Why might you use these patterns? Some are just nicely terse, or maybe you just like the library you are already using for object creation, but generally these patterns offer a lot more in terms of flexibility and functionality. For instance, since most examples are created in a closure you get private variables for free!

1. PlainOldObjects.jsx

function PlainOldObjectComponent(props, context){
  var instance = Object.create(React.Component.prototype)

  instance.props = props
  instance.context = context
  instance.state = { message: 'Object literals ftw' }
  instance.render = function() {
    return <li>
     <button onClick={ e => this.setState({ message: 'stateful!' })}>
        {this.state.message}
      </button>
    </li>
  }

  return instance
}

2. MixinComponent.jsx

function MixinComponent(props, context) {
  return { 
    ...React.Component.prototype,
    props, 
    context,
    state: { 
      message: 'Instances through Extension' 
    },
    render() {
      return <li>
        <button onClick={ e => this.setState({ message: 'stateful!' })}>
          {this.state.message}
        </button>
      </li>
    }
  }
}

3. ParasiticComponent.jsx

function ParasiticComponent(props, context){
  var instance = new React.Component(props, context)

  instance.state = { message: 'Let me just add a method to this one..' }

  instance.render = function() {
    return <li>
      <button href='#' onClick={()=> this.setState({ message: 'stateful!' })}>
        {this.state.message}
      </button>
    </li>
  }

  return instance
}

4.StampitComponent.jsx

// Stampit is an excellent library by Eric Elliott for object creation. 
// https://github.com/ericelliott/stampit

var ReactStamp = stampit.convertConstructor(React.Component) 
// ^^^ convenience method for:
// stampit().methods(React.Component.prototype).enclose(React.Component)

var StampitComponent = stampit()
    .enclose(function () {
      this.state = { message: 'I can even use stampit!' }
    })
    .methods({
      render() {
        return <li>
          <button href='#' onClick={()=> this.setState({ message: 'stateful!' })}>
            {this.state.message}
          </button>
        </li>
      }
    });

StampitComponent = stampit.compose(ReactStamp, StampitComponent);

from ericelliott in the original comments (30 May 2015), on adding propTypes to the function, e.g.:

const helloFactory = function ({ React }) {
  const {
    string,
    func
  } = React.PropTypes;

  return function Hello (props) {

    // React wants propTypes
    // to be static.
    Hello.propTypes = {
      word: string,
      mode: string,

      actions: React.PropTypes.shape({
        setWord: func.isRequired,
        setMode: func.isRequired
      })
    };

    return {

      props, // set props

      componentDidUpdate () {
        this.refs.wordInput.getDOMNode().focus();
      },

      render () {
        const {
          word,
          mode
        } = this.props;

        const {
          setMode,
          setWord
        } = this.props.actions;

        const styles = {
          displayMode: {
            display: (mode === 'display') ? 'inline' : 'none'
          },

          editMode: {
            display: (mode === 'edit') ? 'inline' : 'none'
          }
        };

        const onKeyUp = function (e) {
          if (e.key !== 'Enter') return;

          setWord(e.target.value);
          setMode('display');
        };

        return (
          <p>Hello,&nbsp;
            <span
              style = { styles.displayMode }
              onClick = { () => setMode('edit') }
              >{ word }!</span>
            <input
              ref = "wordInput"
              style = { styles.editMode }
              placeholder = { word }
              onKeyUp = { onKeyUp } />
          </p>
        );
      }
    };

  };

};

export default helloFactory;

from ericelliott in the original comments (30 May 2015), on inheriting from React.Component.prototype.:

You need to inherit from React.Component.prototype

AFAIK, this is only needed for .setState() and .forceUpdate(), both of which should be avoided if possible.

So far I have had no trouble avoiding the component prototype, but as other examples here have shown, it's trivial to use it.

const createRoot ({ React }) { // I usually do this so I can steal PropTypes from it.
  return function Root () { // This component doesn't use props. No need to set them.
    return {
      increment () {
        console.log('clicked');
      },
      render() { 
        return (
          <div>
            <h1>Hello</h1>
            <button onClick={ this.increment }>click me</button>
          </div>
        );
      }
    };
  };
};

module.exports = createRoot;

ericelliott commented on 30 May 2015

For more details on class-free components, check out Baby’s First Reaction: A “Hello, World” Example for React