What is the difference between using constructor vs getInitialState in React React Native

Question

I ve seen both used interchangeably         What are the main use cases for both     Are there advantages   disadvantages     Is one a better practice

User · Answer

These days we don t have to call the constructor inside the component - we can directly call state  something      otherwise previously first we have do declare constructor with super   to inherit every thing from React Component class then inside constructor we initialize our state   If using React createClass then define initialize state with the getInitialState method

User · Answer

If you are writing React-Native class with ES6  following format will be followed  It includes life cycle methods of RN for the class making network calls   import React   Component  from  react   import        AppRegistry  StyleSheet  View  Text  Image      ToastAndroid   from  react-native   import   as Progress from  react-native-progress    export default class RNClass extends Component       constructor props             super props              this state                   uri  this props uri                 loading false                          renderLoadingView              return                  lt View style   justifyContent  center  alignItems  center  flex 1   gt                       lt Progress Circle size  30  indeterminate  true    gt                       lt Text gt                          Loading Data                         lt  Text gt                  lt  View gt                            renderLoadedView              return                  lt View gt                   lt  View gt                            fetchData              fetch this state uri                  then  response    gt  response json                    then  result   gt                                      done                    this setState                            loading true                                   this renderLoadedView                 componentDidMount              this fetchData                 render              if  this state loading                  return                      this renderLoadingView                                            else                  return                      this renderLoadedView                                           var style   StyleSheet create

User · Answer

OK  the big difference is start from where they are coming from  so constructor is the constructor of your class in JavaScript  on the other side  getInitialState is part of the lifecycle of React   constructor is where your class get initialised        Constructor      The constructor method is a special method for creating and   initializing an object created with a class  There can only be one   special method with the name  constructor  in a class  A SyntaxError   will be thrown if the class contains more than one occurrence of a   constructor method       A constructor can use the super keyword to call the constructor of a   parent class    In the React v16 document  they didn t mentioned any preference  but you need to getInitialState if you using createReactClass          Setting the Initial State      In ES6 classes  you can define the initial state by assigning   this state in the constructor    class Counter extends React Component     constructor props        super props       this state    count  props initialCount                       With createReactClass    you have to provide a separate   getInitialState method that returns the initial state    var Counter   createReactClass     getInitialState  function         return  count  this props initialCount                       Visit here for more information   Also created the image below to show few lifecycles of React Compoenents

User · Answer

Constructor The constructor is a method that s automatically called during the creation of an object from a class      Simply put  the constructor aids in constructing things  In React  the constructor is no different  It can be used to bind event handlers to the component and or initializing the local state of the component Jan 23  2019 getInitialState In ES6 classes  you can define the initial state by assigning this state in the constructor  Look at this example var Counter   createReactClass     getInitialState  function         return  count  this props initialCount                      With createReactClass    you have to provide a separate getInitialState method that returns the initial state

User · Answer

The difference between constructor and getInitialState is the difference between ES6 and ES5 itself  getInitialState is used with React createClass  and constructor is used with React Component  Hence the question boils down to advantages disadvantages of using ES6 or ES5  Let s look at the difference in code ES5 var TodoApp   React createClass      propTypes        title  PropTypes string isRequired        getInitialState           return         items                      ES6 class TodoApp extends React Component     constructor          super       this state           items                   There is an interesting reddit thread regarding this  React community is moving closer to ES6  Also it is considered as the best practice  There are some differences between React createClass and React Component  For instance  how this is handled in these cases  Read more about such differences in this blogpost and facebook s content on autobinding constructor can also be used to handle such situations  To bind methods to a component instance  it can be pre-bonded in the constructor  This is a good material to do such cool stuff  Some more good material on best practices Best Practices for Component State in React js Converting React project from ES5 to ES6 Update  April 9  2019   With the new changes in Javascript class API  you don t need a constructor  You could do class TodoApp extends React Component        this state    items          This will still get transpiled to constructor format  but you won t have to worry about it  you can use this format that is more readable   With React Hooks From React version 16 8  there s a new API Called hooks  Now  you don t even need a class component to have a state  It can even be done in a functional component  import React    useState   from  react    function TodoApp        const items   useState       Note that the initial state is passed as an argument to useState  useState     Read more about react hooks from the official docs

User · Answer

The two approaches are not interchangeable  You should initialize state in the constructor when using ES6 classes  and define the getInitialState method when using React createClass   See the official React doc on the subject of ES6 classes   class MyComponent extends React Component     constructor props        super props       this state        initial state               is equivalent to   var MyComponent   React createClass     getInitialState         return      initial state

User · Answer

The big difference is start from where they are coming from  so constructor is the constructor of your class in JavaScript  on the other side  getInitialState is part of the lifecycle of React   The constructor method is a special method for creating and initializing an object created with a class

[reactjs] What is the difference between using constructor vs getInitialState in React / React Native?

Examples related to reactjs

Examples related to react-native

Examples related to constructor

Examples related to react-state