How does ES6 class instance variable work

Question

I have the following code which is working as expected:

import React, { Component } from 'react';

let result = null;
class MyData extends Component {
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        result = items.find(
          item => item.id === 'abcd'
        );
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    return result ? <span>hello</span> : null;
  }
}

When I try to move result as an instance variable of the class as follows, it always remains null in the render() method. Though the assignment is working correctly post fetch:

import React, { Component } from 'react';

class MyData extends Component {
  result = null;
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.result = items.find(
          item => item.id === 'abcd'
        );
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    return this.result ? <span>hello</span> : null;
  }
}

Can someone explain me what is the expected usage here. And how things have changed from ES6 onwards.

=> functions don't do this the way that regular functions do, so you've got no reference to the instance in the _getData function. — Pointy
– Pointy, Commented Dec 6, 2019 at 16:31
The expected usage in React is that you would store the data in the state which would trigger a rerender. — Quentin
– Quentin, Commented Dec 6, 2019 at 16:35
"I have the following code which is working as expected: "-> What is expected? it remains null in first case too codesandbox.io/s/focused-microservice-ozgrr — gmoniava
– gmoniava, Commented Dec 6, 2019 at 16:41
@Pointy this is ES6 class properties syntax, so calling => class property function results in this being the class instance inside the function — Max
– Max, Commented Dec 6, 2019 at 16:44
@Max ah because instance properties are treated as being initialized in the constructor, which is a "normal" function and has the this value bound to the new instance. That makes sense, though it's part of why instance property syntax really makes me upset. It's a "me" problem of course. — Pointy
– Pointy, Commented Dec 6, 2019 at 16:47

Dennis Vash · Accepted Answer · 2019-12-06 16:52:05Z

4

Both examples just don't work, the reason is that componentDidMount lifecycle fires after render lifecycle.

Because you don't cause re-render (with setState) in any phase, nothing will cause an additional render to read the updated value of result.

Therefore, the next example will always render No Result

import ReactDOM from 'react-dom';
import React, { Component } from 'react';

let result = null;

class App extends Component {
  thisResult = null;
  setResult = () => {
    result = 10;
    this.thisResult = 10;
  };

  componentDidMount() {
    this.setResult();
  }

  render = () => {
    return <div>{result || this.thisResult ? 'Result' : 'No Result'}</div>;
  };
}

ReactDOM.render(<App />, document.getElementById('root'));

edited Dec 6, 2019 at 16:52

answered Dec 6, 2019 at 16:46

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

Nitsew · Accepted Answer · 2019-12-09 20:12:25Z

The reason you are seeing null is because the state is not being updated in the code example you posted. The component mounts and this.result is null. But when the _getData method is called and the response comes back, the component is not being rendered.

You should be storing this data in your state, as React relies on the state changes to know when it should re-render the component. Try something like this:

import React, { Component } from 'react';

class MyData extends Component {
  state = {
    result: null
  }
  _getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        this.setState({
          result: items.find(
            item => item.id === 'abcd'
          )
        })
      });
  };

  componentDidMount() {
    this._getData();
  }

  render() {
    const { result } = this.state
    return result ? <span>hello</span> : null;
  }
}

You can learn more about rendering, state, and component lifecycles here: https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class

Edit: If you want to experiment with the new react hooks api, you could convert your component to look like the folllowing:

import React, { useEffect, useState } from 'react';

const MyData = ({ ...props }) => {
  const [result, setResult] = useState(null);

  const getData = () => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        const result = items.find(item => item.id === 'abcd');

        setResult(result);
      });
  };

  useEffect(() => {
    getData();
  }, []);

  return result ? <span>hello</span> : null;
}

LukeT · Accepted Answer · 2019-12-06 17:00:02Z

I think the main thing you're missing is state. Keep in mind that these Components you are extending are React Component classes which have a very specific life cycle. Look into component life cycle for more info. This will work as expected with the following refactor:

import React, { Component } from 'react';

class MyData extends Component {
    constructor() {
        super();
        this.state = {result:  null};
    }

    _getData = () => {
        fetch(url)
        .then(response => response.json())
        .then(data => {
            let resp = data.items.find(
                item => item.id === 'abcd'
            );

            this.setState({ result: resp });
        });
    };

    componentDidMount() {
        this._getData();
    }

    render() {
       return this.state.result ? <span>hello</span> : null;
    }
 }

Collectives™ on Stack Overflow

How does ES6 class instance variable work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related