In my react application, I want to use some utils. I have seen 2 different approaches. First one is, just creating the function and export it. Second one is, creating a Util class and export an object so it can't be instantiated (static class).

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
}

export default new Util();

VS

export default redirectIfAuthenticated = (isAuthenticated, history, screen) => {
   if (isAuthenticated) 
      history.push(screen);
}

What is the better approach here and why?

In my react application, I want to use some utils. I have seen 2 different approaches. First one is, just creating the function and export it. Second one is, creating a Util class and export an object so it can't be instantiated (static class).

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
}

export default new Util();

VS

export default redirectIfAuthenticated = (isAuthenticated, history, screen) => {
   if (isAuthenticated) 
      history.push(screen);
}

What is the better approach here and why?

• javascript
• reactjs

• You might have better luck posting this over at Code Review. – JoshG Commented Jan 28, 2019 at 6:03

5 Answers 5

Singleton classes are often considered antipatterns. Util is an antipattern in this case. A class is used as a namespace, while modules are already there to provide namespaces.

The use of default export for multiple exports will prevent them from being tree-shaked.

export default redirectIfAuthenticated = ... is a mistake, it results in creating redirectIfAuthenticated global variable in loose mode and in error in strict mode.

In case there should be only one export, default export can be used:

export default (isAuthenticated, history, screen) => { ... };

In case there's a possibility that there may be multiple exports (even if there's currently only one), named exports can be used:

export const redirectIfAuthenticated = (isAuthenticated, history, screen) => { ... };

Using separate functions is usually the preferred way due to tree shaking.

Tree shaking is the process of removing unused imports by your build tool (e.g. Webpack) in order to minify your code. Classes are much harder to minify for these tools, so that’s something to consider.

Class can be used when it has functions which are closely coupled with each other. If your utils function doesn't relate with each other, you can use second approach. I would remend using second approach as usually util functions doesn't relate with each other. util functions are developed so that they can be reused in other ponents.

You can do it both ways, but making a util class and defining all your functions there is a standard way of doing it. For example:

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
  anotherFunction = () => {
     // your code

}

export default Util;

So, you can define multiple functions here, and import these functions from util class to use anywhere.

I think generally this is something people who move to JavaScript from other languages hit when they first start working. Not everything needs (or should be) a class, and you'll have a better time when you start to code that way.

Also, if you just want your imports to look nice, if you're transpiling you can generally create aliases for your paths.