CODEWITHSUNDEEP
javascriptreactjs
Devin Dixon
Devin Dixon

Reputation: 12403

Does Importing Components on Javascript Require New Resources on Every Import?

Let's say I have a large module/component in react as such:

var musicPlayer = function () {
  var songList = ['California Girls', 'California Dreaming', 'Hotel California'];  

  function play () {
    console.log('Im playing the next song!');
  }

  function pause () {
    console.log('Im paused!');
  }

  //pretend it has like 50 more functions
  //which is not ideal, but the case for the questions
  return {
    playMusic: play,
    pauseMusic: pause,
    showNextTrack: showNextTrack,
    addTrack: addTrackToMusicQueue
  }
}

Now everytime I import this component as such: 

import MusicPlayer from "MusicPlayer";

Even though the class is pretty much static and does not create an instance:

  1. Does importing and using the class require extra resources like memory or cpu for each import?
  2. Does it use the same memory?
  3. If it's a NOT new instance, is there a way where the import memory can be shared as not to use extra resources?

Upvotes: 0

Views: 103

Answers (1)

Caleb Taylor
Caleb Taylor

Reputation: 3230

Does importing and using the class require extra resources like memory or cpu for each import?

ES6 modules are taken care of during compile time, which React framework is utilizing webpack during development.

Does it use the same memory?

If it's a NOT new instance, is there a way where the import memory can be shared as not to use extra resources?

ES6 modules make sure it’s the same instance of the class as you require somewhere else. ES6 Modules are singletons - the instance is created when module is loaded.

Upvotes: 2

Related Questions