React component owning objects

Question

Is it recommended in React component to own other objects ? Is there some disadvantage of doing so ? I see it is done here

and here is my example:

import React, {Component} from 'react';
import Utility from './Utility';

export default class MyComponent extends Component {
    static defaultProps = {
        message: 'Hello',
        name: 'John!'
    };
    constructor(props) {
       super(props);
       this.utility = new Utility();
    }
    render() {
        return (
            <h1>{this.props.message}, {this.props.name} {this.utility.getText()}</h1>
        );
    }
}

Utility would be some class providing more functionality to the component. Most of the examples I've checked don't have this kind of things. If it is fine to use then would it be better to instantiate in the constructor or in mount function ?

Abdennour TOUMI · Accepted Answer · 2017-02-18 19:24:44Z

2

Since , it is an utility, it is recommended to use singleton design pattern.

Indeed, I spent almost 6 months i was working like your snippet shows.

However, I am now switching to singleton design pattern as following:

Utility.js

class Utility {
   // methods

}

export const utility = new Utility();
export default  Utility; //👈🏼 i know, you are using only this .. use also the above 👆 to export the singleton

Then , in your React Component :

import React, {Component} from 'react';
import {utility} from './Utility'; //👈🏼 import with "{utility}" not "Utility"

export default class MyComponent extends Component {
    static defaultProps = {
        message: 'Hello',
        name: 'John!'
    };
    constructor(props) {
       super(props);
      // this.utility = new Utility(); <-- no need 🔇
    }
    render() {
        return (
            <h1>{this.props.message}, {this.props.name} {utility.getText()}</h1>
        );
    }
}

answered Feb 18, 2017 at 19:24

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

4 Comments

Janne Over a year ago

Good point! Would make sense in one case I'm working right now.

Abdennour TOUMI Over a year ago

Welcome @Janne .. By the way, all the following 👉🏼 constructor(props) { super(props); this.utility = new Utility(); } can be replaced by utility = new Utility(); . it is not related to my answer ,, but it is related to ES7 since your are already using static attributes inside the class .

Janne Over a year ago

Tried singleton approach in my project and it is perfect solution for two utility classes 😎

Abdennour TOUMI Over a year ago

congrats! 🎉🎉🎉

Fyre · Accepted Answer · 2017-02-18 19:07:26Z

1

It doesn't matter. I would prefer to do it in the constructor as I feel this is more of a initialization process. The only way react lifecycle methods communicate with each other is by either looking up in the state(or props) or the this variable.

Most of the times putting random things in the state only causes performance issues by calling the render again and again, so you should try to move these variables to the this like:

this.utility = new Utility();

Also if this is something that is being used at multiple places consider passing it in the props from the parent. This way you can use the same initialized object everywhere in the children components(But that depends on your use case).

answered Feb 18, 2017 at 19:07

Fyre

1,1788 silver badges12 bronze badges

2 Comments

Janne Over a year ago

I guess with react applications the design of the application becomes even more important just to avoid bloating unnecessary props while passing still important ones to right places.

Fyre Over a year ago

This really depends on the use case

Collectives™ on Stack Overflow

React component owning objects

2 Answers 2

Utility.js

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Utility.js

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related