4

I am confused, or I can say, I have no clue how the exporting actually works.

I have a React app, and I have some protected Routes. On login, I create a Client object instance and pass it to child components through Context, and then consume it.

Recently I saw an approach where the example code exported an object instance from a file directly and just imported it in files they wanted to consume it.

/** My approach **/
export default Example

/** The Object Instance approach **/
export default new Example()

What is the lifecycle of the object instance? Are there any disadvantages with the second approach, because it seems way easier?

konsalex
  • 425
  • 5
  • 15
  • You'll want to have a look at https://stackoverflow.com/questions/39076190/differences-between-creating-a-new-class-to-using-export-const/ – Bergi Nov 27 '21 at 15:06

1 Answers1

5

If you export the class, with

export default Example

then consumers of the module will be able to instantiate their own instances, and each instance will be able to have its own data. For example

// 1.js
import TheClass from './TheClass';
const tc1 = new TheClass();
tc1.foo = 'foo';

// 2.js
import TheClass from './TheClass';
const tc2 = new TheClass();
tc2.foo = 'bar';

Both modules can continue to use tc1 and tc2 completely independently, since they're separate instances.

But if the original module exports an instance rather than a class, then all consumers of the module are forced to use the same instance:

// 1.js
import theInstance from '...';
theInstance.foo = 'foo';

// 2.js
import theInstance from '...';
// might not be a good idea to do theInstance.foo = 'bar' here
// because that will affect 1.js as well
// and will affect any other modules that imported the instance

In short - exporting the class is more reusable than exporting the instance. Sometimes potential reusability is something a script-writer will consider important, and sometimes it isn't. (And sometimes, even if you don't consider it useful initially, you may encounter a situation later that forces you to reconsider.)

And sometimes you want to make sure that there's only one instance ever in a script, in which case

export default new Example()

is a way to accomplish it.

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • So for a React application for example, with multiple imports in multiple files, all of them will consume the same object instance right? Because this approach is very handy for example using a single Driver in the whole application without having to pass it through. Then the question is will this work the same with lazy load etc. – konsalex Oct 21 '21 at 17:41
  • It depends on what exactly the class is. If it's a class component, for example, all will consume different instances - `React.createElement` will be called with the class to create instances every time there's a re-render. For things like database interfaces, exporting a single instance used everywhere makes sense. (Or, even better, rather than a class, you could export a plain object in such a case) – CertainPerformance Oct 21 '21 at 17:48
  • Class makes sense in the beginning, because if it is always exported as an instance, the credentials are not set, so you need the instance initiated in a stale state before setting the creds etc. – konsalex Oct 21 '21 at 17:50
  • "*you want to make sure that there's only one instance ever in a script*" - then you shouldn't use a `class` though. As anyone can create a `new theInstance.constructor()` … – Bergi Nov 27 '21 at 15:08