0

What is the difference between writing a variable after the render function like this :

render() {
var headers=[
    { key: 'userId', label: 'User ID' },
    { key: 'id', label: 'ID' },
    { key: 'title', label: 'Title' },
    { key: 'body', label: 'Body' }
];
    return (

and writing " this.name of variable " in the constructor function like this :

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            users: []
        };

        this.headers = [
            { key: 'userId', label: 'User ID' },
            { key: 'id', label: 'ID' },
            { key: 'title', label: 'Title' },
            { key: 'body', label: 'Body' }
        ];

    }

    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
            return response.json();
        }).then(result => {
            this.setState({
                users:result
            });
        });
    }

    render() {

Other than the fact that when i summon it in the first one i write { headers } and in the second one i write {this.headers}

Note:This is not about var vs this,It's about the structure of the main app class in the create-react-app and its connection with the position in which the previous code is written.

Amr
  • 759
  • 1
  • 6
  • 13
  • 1
    In the first case you're defining a variable every time the `render` function runs and in the second case you're only doing that once, when an instance of the class is created. – Titus Jul 28 '19 at 15:18
  • 1
    Also, in the first case you're limiting the scope of the variable to the `render` function. – Titus Jul 28 '19 at 15:21
  • 1
    In the second case you are defining a property, not a variable. They act different and serve different purposes. – Jorge Fuentes González Jul 28 '19 at 15:23
  • @Titus so i should always use this.variable name method when i need to use any variable ? – Amr Jul 28 '19 at 15:24
  • Not necessarily, if the data isn't instance dependent, you can create a variable outside the class, that way, you have a single variable for all instances of the class. This all depends on what you're trying to do. – Titus Jul 28 '19 at 15:26
  • @JorgeFuentesGonzález In normal javascript i know the difference between a variable and a class/object property,but it's a little bit different in React.js, can you please explain more – Amr Jul 28 '19 at 15:28
  • 2
    Possible duplicate of [javascript var vs this](https://stackoverflow.com/questions/27589494/javascript-var-vs-this) and [var vs this in Javascript object](https://stackoverflow.com/questions/4946625) – adiga Jul 28 '19 at 15:31
  • 1
    @Amr React is normal JavaScript, but with a framework over it. The same JavaScript rules apply (the difference between `var` and `this` that *@adiga* suggests). – Jorge Fuentes González Jul 28 '19 at 15:39

1 Answers1

0

this.someName will become a field on the value of 'this', in your case, the App class. Therefore it is available throughout your App class, e.g. in the render method, or any other instance method, such as componentDidMount, or foo().

In contrast, if you declare the variable inside the render function, then it's scoped to the render function, i.e. it's not going to be available inside an instance method, e.g. componentDidMount.

If you define the variable in the render method, then it's just that, a variable within a method, thus it's going to get instantiated on every call to the render function, that could be expensive, if there's no good reason for that additional overhead, then declaring the variable on this would be a sensible option.

Only other thing that comes to mind to mention is that changing the value of a class field will not queue a render, whereas if a given value is defined in the state object of a React component class, then this will trigger a new render.

PS - It's not 100% clear what you're asking.

Lee Brindley
  • 6,242
  • 5
  • 41
  • 62