CODEWITHSUNDEEP
javascriptreactjssingletonreact-functional-component
Manoj Singh
Manoj Singh

Reputation: 2941

How to share a class instance across a react application?

How to share a class instance across a react application?

I need to use an external library which requires me to instantiate it and use that instance in the application to access various methods/properties,

const instance = new LibraryModule(someInitData);

I am using react functional components in my project. I don't want to re-create instance every time I need to use it (can be thought of a singleton).

How can I share the same instance with all of my components?

Upvotes: 1

Views: 2881

Answers (3)

random111
random111

Reputation: 1

I was looking for a similar answer, instead of importing the whole class instance I think you can export each method individually and only import that specific method into your component when necessary, may be the most code efficient way to do it.

Another solution may be if you are using a router between all your pages, create an instance of the class at the router page and pass it to each component as props when necessary.

Upvotes: 0

Hitmands
Hitmands

Reputation: 14199

it seems like you are looking for some sort of Dependency Injection, a thing that isn't really in the react way.

I'd suggest to use the Context Api. https://reactjs.org/docs/hooks-reference.html#usecontext

import React from 'react';

export const LibraryModuleContext = React.createContext(new LibraryModule);

import React from 'react';
import { LibraryModuleContext } from './library-module';

const App = () => (
  <LibraryModuleContextt.Provider>
    <Toolbar />
  </LibraryModuleContext.Provider>
)

and then later in your code

import React from 'react';
import { LibraryModuleContext } from './library-module';

const FooComponent = () => {
  const LibraryModule = useContext(LibraryModuleContext);

  return (
    <div>Hello {LibraryModule.x}</div>
  );
};

Upvotes: 1

Dennis Vash
Dennis Vash

Reputation: 53964

Imports are already global, you just need to import the module:

class LibraryModule {
  x = 5;
}
const instance = new LibraryModule();

export default instance;

import instance from "./MyLibrary";
import Component from "./Component";

console.log(instance.x);

const App = () => {
  useEffect(() => {
    console.log(`from App, called last`, instance.x);
  }, []);
  return <Component />;
};

import instance from "./MyLibrary";

const Component = () => {
  useEffect(() => {
    instance.x = 10;
    console.log(`from component`, instance.x);
  }, []);
  return <>Component</>;
};

Edit fancy-https-j0s5u

Upvotes: 3

Related Questions