{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/react-constructor-get-initial-state/","result":{"data":{"markdownRemark":{"id":"3bd2ec94-ca56-5b2e-be7f-e39cda842b74","excerpt":"One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s constructor and the…","html":"

One fairly popular question that got asked on programming bulletin boards has to do with the similarities and differences between React’s constructor and the built in method getInitialState. While the simple answer to this question is indeed simple: “getInitialState is the ES5 friendly method to define the initial state of a React component,” there are a couple more details around getInitialState as well as React’s ES5 support that are interesting and useful to highlight.

\n

Constructor vs getInitialState: With or without Classes:

\n

One of the fundamental differences between ES5 and ES6 in regards to React implementation is the new class keyword. It allows definition of React components as classes, which is a familiar data structure for anyone who has had experience with more traditional object-oriented languages such as Java or C++. The class structure also allows for natural organization of the component’s elements like state, props, lifecycle methods and member functions. However, ES5 did not provide the same convenience. So instead of defining a React component as a class:

\n
class HelloWorld extends React.Component {\n  render() {\n    return <span>Hello World</span>;\n  }\n}
\n

You would rely on a helper module called create-react-class:

\n
var createReactClass = require('create-react-class');\nvar HelloWorld = createReactClass({\n  render: function() {\n    return <span>Hello World</span>;\n  }\n});
\n

And it is within the object passed into create-react-class that you could define an initial state by populating the getInitialState attribute:

\n
var HelloWorld = createReactClass({\n  getInitialState: function() {\n    return {name: this.props.name};\n  },\n  render: function() {\n    return <span>Hello {this.state.name}</span>;\n  }\n});
\n

Which, in ES6 implementation would be the equivalent of:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n  }\n  render() {\n    return <span>Hello {this.state.name}</span>;\n  }\n}
\n

Autobinding

\n

One difference worth noting is that the create-react-class method automatically binds this to every attribute method. This no longer holds true if you define React components using the common ES6 class syntax, making it so that you have to manually bind this to internal methods:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n\n    this.changeName = this.changeName.bind(this);\n  }\n  changeName() {\n    this.setState({ name: "World" });\n  }\n  ...\n}
\n

Or otherwise use the “arrow function” shorthand which takes care of binding:

\n
class HelloWorld extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      name: props.name\n    }\n  }\n  changeName = () => {\n    this.setState({ name: "World" });\n  }\n  ...\n}
\n

Parting Words

\n

Since the update to ES6, there have been multiple new React iterations. You could now forgo the constructor declaration altogether and just declare state inline as a class member, or utilize React Hooks as a new way to initialize states. However, the ES5 support remains useful for legacy systems and adds to the overall flexibility of React as a toolset.

\n

You can read more about React's ES5 support in the official doc entry here, and the v0.13.0 beta release blog entry here, for the respective ES6 changes.

\n","headings":[{"value":"Constructor vs getInitialState: With or without Classes:","depth":2},{"value":"Autobinding","depth":2},{"value":"Parting Words","depth":2}],"fields":{"slug":"/engineering/react-constructor-get-initial-state/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":"No ES6? No problem. getInitialState is the ES5 friendly method to define the initial state of a React component.","title":"Constructor vs getInitialState in React","canonical":null,"date":"January 05, 2021","updated_date":null,"tags":["JavaScript","React"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/d152aa4ad7b599edbdd9b6465d8f014b/2ad7f/index.webp","srcSet":"/static/d152aa4ad7b599edbdd9b6465d8f014b/1c9b5/index.webp 200w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/f1752/index.webp 400w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/2ad7f/index.webp 800w,\n/static/d152aa4ad7b599edbdd9b6465d8f014b/0b4ca/index.webp 865w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Nathan Nguyen","github":"nathannguyenn","bio":"Nathan Nguyen is a Software Engineer at LoginRadius. With deep interest in creating user-facing applications, he spends a lot of his time with web and mobile technology stacks, off and on the job, looking to build applications that are ever more intuitive and helpful to end users. Loves food, travel, photography and video games.","avatar":null}}}},"pageContext":{"id":"3bd2ec94-ca56-5b2e-be7f-e39cda842b74","fields__slug":"/engineering/react-constructor-get-initial-state/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}