ES6 React Redux syntax clarification

Question

I'm new to ES6 and Redux. Im looking at some code and trying to understand what is going on in this new ES6 syntax.

I feel like this may be simple but i am not understanding it and it might help someone else in a similar position to me.

i want to know how the following code is creating a react element. im familiar with the React.createClass method, but that doesnt seem to be stated here or at least not explicitly. i can see React is imported, but it isnt mentioned in the rest of the code. so then how the FileTable get turned into a react component?

I can see the const variable FileTable seems to contain what would usually go in the render method of React.createClass, but if that is the case, where would methods like componentDidMount, componentDidUpdate, etc be defined?

Any help on this is greatly appreciated.

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';

const FileTable = ({ fileList, getFileList}) => {

    return (
        <ul className="filterable-table">
            {fileList.map((file)=><li>{file.fileName}</li>)}
        </ul>
    );
};

FileTable.propTypes = {
    fileList: PropTypes.array,
};

const mapStateToProps = (state) => {
    return {
        fileList: state.fileList
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        getFileList: () => dispatch(actions.getFileList())
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(FileTable);

Dave Newton · Accepted Answer · 2016-08-01 20:22:31Z

4

You can create react components in 3 ways - React.createClass, ES6 class or Stateless (pure) function component. This is a stateless component, which means that it doesn't have state, life cycle methods (like componentDidMount or componentDidUpdate), and refs, and as you surmised it's similar to the render method of a react class.

Whenever you need a purely representational dumb component you can use a stateless component, due to its brevity. It goes nicely with redux, as the connect create a smart component that wraps the stateless method.

Regarding performance, stateless components don't have any performance gain over ES6 class component without state. However, Facebook stated that in the future there will be some optimizations.

edited Aug 1, 2016 at 20:22

Dave Newton

161k27 gold badges263 silver badges311 bronze badges

answered Aug 1, 2016 at 20:21

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

CallMeNorm Over a year ago

The compiler, which is probably babel/webpack/browserify, has a plugin that somehow transforms the JSX to javascript. If you use react-jsx transform for babel then it's assumed that JSX can be transformed into React and this stateless function will be turned into React.createElement.

X0r0N Over a year ago

that helps a lot! but if that is the case, if i were to create a React component, would i be able to define it the normal way with const newComponent = React.createClass({render:..., componentDidMount:...}). and at the end connect(mapStateToProps, mapDispatchToProps)(newComponent) and the result would be that newComponent would be connected to the store?

Ori Drori Over a year ago

Actually react wraps a stateless function in a class that extends React.Component, and called in it's render method. Connect is a component that extends React.Component, and it calls the component it wraps in it's render method as well, be a stateless function or not. No matter how you'll wrap it, stateless function won't have life cycle methods.

X0r0N Over a year ago

if connect() removes all except the render method, what would be the method for creating a a component with lifecycle methods that also connects to redux store?

Ori Drori Over a year ago

Connect doesn't remove anything. Connect is a stateful component, with life cycle methods, and a render method. Whatever component type you'll wrap with Connect, will be called inside Connect render method. If it has life cycle methods of it's own, they will be invoked normally.

Dave Newton · Accepted Answer · 2016-08-01 20:21:38Z

0

It doesn't have to be declared here as a React component; React knows about pure functions.

Pure functions don't need to inherit from Component. They're not appropriate for all component types, but for simple HTML renders they're preferred (e.g., see eslint-plugin-react prefer-stateless-function.

Pure functions don't have component lifecycles, associated methods, etc.

answered Aug 1, 2016 at 20:21

Dave Newton

161k27 gold badges263 silver badges311 bronze badges

Collectives™ on Stack Overflow

ES6 React Redux syntax clarification

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related