Proper way of defining/initializing state in reactjs or react-native

Question

So far I understand there are two ways to define state in react class.

The first as many people use them, is as follows:

import React, { Component } from "react";
import { View, Text } from "react-native";

export default class Test extends Component {

  constructor (props) {
     super(props)
     this.state = {
       text: 'hello'
     }
  }

  render() {
    return (
      <View>
        <Text>{this.state.text}</Text>
      </View>
    );
  }
}

The second one is as follows:

import React, { Component } from "react";
import { View, Text } from "react-native";

export default class Test extends Component {

  state = {
     text: "hello"
  }

  render() {
    return (
      <View>
        <Text>{this.state.text}</Text>
      </View>
    );
  }
}

The difference is at using constructor or not. What is the effect and is there any difference at all between the two? If there is, which one should I use?

Thank you!

Possible duplicate of init state without constructor in react — imjared
– imjared, Commented Jan 22, 2019 at 5:17
Possible duplicate of Is it better to define state in constructor or using property initializers? — Just code
– Just code, Commented Jan 22, 2019 at 5:23

Perpetualcoder · Accepted Answer · 2019-01-22 05:38:11Z

1

Both methods are correct. Make sure you have support for class properties enabled in the babelrc. If you are using CRA both will work. Constructor one is better on the eyes if you want to seed the initial state from props.

answered Jan 22, 2019 at 5:38

Perpetualcoder

13.6k10 gold badges67 silver badges101 bronze badges

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

Comments

Umair Farooq · Accepted Answer · 2019-01-22 05:17:39Z

0

Both methods are fine. Second one is the short-hand method

answered Jan 22, 2019 at 5:17

Umair Farooq

1,8331 gold badge14 silver badges17 bronze badges

Collectives™ on Stack Overflow

Proper way of defining/initializing state in reactjs or react-native

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related