Are constructors, binding, (super), lifecycle methods still used in reactJS?

Question

Forgive me, I am relatively new to reactJS, but going through multiple tutorials including those on the official website, I am quite confused. It seems there has been a ton of updates in the past few years for reactJS, and everyone is using different conventions. I wanted to get some clarity here on a few concepts.

1) Constructors: The reactJS official docs still use a constructor such as the following:

const MyComponent extends React.Component {
  constructor(props) {
   super(props) 
    this.state = {
       points: 0
    }

But from what I have seen in different more recent tutorials, it is much simplified into the following:

const MyComponent extends React.Component {
  state = {
       points: 0
    } 
}

Is the official reactJS website just outdated and I should always use the second way? (constructors/super(props) are not needed?) Seems much simpler the second way for sure.

2) Binding Is binding also not needed anymore (due to the ability to use arrow functions?)? I am not exactly clear on the concept of binding, seems quite confusing, but seems some newer tutorials use arrow functions, not sure if there is any case now that needs to use the binding method.

3) Lifecycle methods Such as componentdidmount and such, have these changed at all? Or completely unchanged? Do I still need to use these functions? It seems componentwillmount is gone, but not sure about didmount.

Cheers and thanks

Alexey Nikonov · Answer 1 · 2020-05-26T19:37:00.267

It is completely equal, but with 1st example you may do some addition features before component is created.

It's very helpful when you create Inheritance between your components, or want to add some functionality when component get created.

class Parent{
  props = {prop: 'im first prop}

  fetcher(){
    return fetch('google.com')
  }

  componentToRender() {
    return new MyComponent(this.props, this.fetcher)
  }
}

Hence your MyComponent receives 2 parameters but React.Component expect to get 1 only and the 2nd you want to use when component just created, so

class MyComponent extends React.Component {
  constructor(props, fetcher) {
   super(props) 
    this.state = {
       fetchedResponse: fetcher().then(res => res.tojson()),
       points: 0
    }

Your second example is just the short code with the same meaning

class MyComponent extends React.Component {
  state = {
       points: 0
    } 
}

UPDATE: with word Super you just invoke overwritten parent method, but this is not the case of question. Here is already answered one

score 0 · Answer 2 · answered May 26 '20 at 21:01

In February 2019, with the introduction of hooks, the React team announced their intention to prefer function components over class components going forward. There are currently no plans to formally deprecate class components, but state hooks will only work with function components.

With plain JSX, function components are declared like this:

const initialValue = 0;

const MyComponent = (props) => {
    const [someValue, setSomeValue] = useState(initialValue)
    return (
        <div>
            <h1>{props.title}</h1>
            {props.children}
        </div>
    );
};

It's easier to see what's going on with Typescript notation:

interface MyComponentProps {
    title: string;
}

const initialValue = 0;

const MyComponent: FunctionComponent<MyComponentProps> = (props: PropsWithChildren<MyComponentProps>) => {
    const [someValue, setSomeValue] = useState<number>(initialValue)
    return (
        <div>
            <h1>{props.title}</h1>
            {props.children}
        </div>
    );
};

With Typescript, FunctionComponent takes a type parameter that declares the expected shape of the props. PropsWithChildren makes any elements included within the component tag available as a member called children on the props object.

someValue is a state hook that holds a number. It can be changed from within the component by using the function setSomeValue. These names are arbitrary.

Are constructors, binding, (super), lifecycle methods still used in reactJS?

2 Answers2