0

Is it expensive to add a module to the 'global' within react? I wish to have a module avilable when needed without having to rely upon importing it into each file.

I am adding the following into the 'index.jsx' file:

import axios from 'axios';
global.axios = axios;

then using axios by refering to the global.

quinton
  • 353
  • 1
  • 6
  • 14
  • 2
    It is not any more expensive then regular globals. However, usually it goes against best practice to use globals. – Keegan Teetaert Mar 14 '18 at 16:41
  • my thinking exactly, but would it not depend on the size of the module? importing a module to the file that needs it rather than importing and assigning it to a global to be acessed later, would not the latter be more expensive with memory? and resources? what happens when I import the module to each file? does it make an instance of it multiple times (multiple imports) or just a reference to it? if a reference then would not a global assignment compared to importing to each file be just as expensive? – quinton Mar 14 '18 at 16:49
  • Modules are only referenced. They are only loaded one time and are stored in memory. By importing the module you are saying this code has access to it. Usually importing the module to each file that requires it is best. As far as it being more expensive, it would be the difference of assigning just a few variables. – Keegan Teetaert Mar 14 '18 at 16:54
  • What will happen? Every time you're exposing modules to global scope for no good reason, God kills a kitten. – Estus Flask Mar 14 '18 at 17:17
  • The whole reason imports exist is because globals are hard to manage. Don't do this. It is clearer to import and no more expensive. – loganfsmyth Mar 14 '18 at 18:42

1 Answers1

1

By expensive, you probably mean, does it add to the overall file-size or memory usage? No, it does not, unless, for example, you use code splitting and don't extract your common or vendor bundles into a separate file.

It's best practise to try and not populate the global scope, for two main reasons:

  • Any member can access the global scope and screw up what you have defined there.
  • If you place too many things on the global scope, there are bound to be name conflicts.

Your question is not specific to React or ES6. There is no "Global React object". In a browser context, the global scope is the window object; so you would use window.axios = axios;. In a node environment, it would be global.axios = axios;. Setting global variables is very useful in some situations, for example, in testing. When setting up tests to run in node, it's common to set your assertion methods on the global object.

When you import axios, a single instance is created. You gain nothing from placing a reference to axios on the global scope, but you open up possibilities for bugs. Also, in my opinion, defining your dependencies/imports in each file will help with readability and with intellisense in some editors.

Libraries which make network requests, like axios, are generally placed in service modules or an API util, not in every module. However, if axios really is integral to your app and you import it in many places, you can use something like ProvidePlugin (if you're using webpack).

ProvidePlugin

Automaticlly load modules instead of having to import or require them everywhere.

Community
  • 1
  • 1
chipit24
  • 6,509
  • 7
  • 47
  • 67
  • Thanks for your answer on this, yes I agree, not best to place on the global scope, this is only 1 exception as we use axios and as it is used allot I wanted to minimise the amount of times I need to import the file. adding it to the global scope seemed right....yet not best practice and could course other issues as you said. Will keep it away from the global scope. I was using the node varient but of course the build will convert that to using the browser 'Window' object. – quinton Mar 14 '18 at 17:06
  • @quinton I updated my answer with some more details. There is nothing wrong with breaking best practise if it makes sense for your particular use case, as long as you understand what you're doing. – chipit24 Mar 14 '18 at 18:10