How to centralize imports in React components? - reactjs

After developing an application up to the delivering to mass market, I now want to improve codebase and reduce technical debts.
I realized that I have a huge amount of import statements at the top of my react components. In one case it's more than 50 lines.
I also realized that in almost all of my components I have some commen imports, like React, useEffect, useState from react library, and TextFilter, NumericFilter, Spinner, Dialog, Show from my internal components.
Thus even if I somehow centralize common imports, I can reduce the lines of code by at least 5% factor.
How can I reduce these lines of codes:
import { React, useState, useReact } from 'react';
import TextFilter from '../Components/Filters/TextFilter';
import NumericFilter from '../Components/Filters/NumericFilter';
import Dialog from '../Components/Dialog';
To something like this:
import * from 'common';
Also I couldn't find a good answer on the performance benchmarks related to centralizing ALL imports. In other words, in my application, let's say I have 180 distinct import statements, including icons.
What happens if I centralize ALL of them?


Create a Barrelfile.
It basically makes you create a top-level index.ts where you export all your components. Then you can import everything from that 1 index.ts file. Works for JS as well.
Another thing, I would do is use React.useEffect instead of destructuring useEffect. Reduces a lot of LOCs. But that's just my preference.
Another thing I use is relative aliases like #/ instead of ../../. I use it with Next.js like https://nextjs.org/docs/advanced-features/module-path-aliases


You could create an alias.
The setup depends on your build tools.
For webpack, it would look like this:
https://dev.to/georgedoescode/simplify-your-imports-with-webpack-aliases-59f
Centralizing all components might increase the danger of breaking tree shaking or adding circular dependencies. If you check your bundle size after the refactor and add some linter to check for cycles there shouldn't be a problem.

Related

ReactDOM is too big when imported

How to make ReactDOM smaller when importing into my project?
This is what the Import Cost extension in VS Code shows - it's in read font color - about the size of ReactDOM:
here is the screenshot
Any idea how to make it smaller and make Import Costs shows it in green and not red?

ReactDOM is heavy because of the amount of implementations it has. Anyone who uses React will have the same "issue" but I personally wouldn't recommend touching it. This is how it works under the hood if you see anything you want to alter/ remove to make your ReactDOM smaller if it is absolutely necessary.
https://github.com/facebook/react/tree/main/packages/react-dom

Reduce import cost of TSDX package

So I'm a bit new to bundle size performance improvements and something I'm trying to do is to reduce the import cost of my component library that's written in TSDX. It's a tool to create Typescript libraries based on rollup.js. I'm using the out of the box setup.
When I investigated my app I found out that the import cost of components from my component library seems to be a lot. See images:
It seems that when I import a single component (or function) there is a lot of other things imported as well. Is there someone out there that knows if this is normal and/or if I can improve this? Maybe someone knows how I can import it like how they do it with the lodash packages where you import a single util from a specific folder like so: import { add } from 'lodash/add'?
So long story short: how can I reduce the import cost of my TSDX (based on rollup.js) library? Thanks in advance!

Will switching to React Hooks affect my app's bundle size?

I wrote my website with a mixture of React classes and functional components. Now I am considering rewriting it using React Hooks. It's critical to me to keep my compiled bundle small. Should I expect switching to Hooks to substantially increase or decrease the size of the bundle?

Dont worry it doesnt really matter as both do the same work plus when you use react hooks
your bundle size tends to decrease as your code gets drastically minified.
Here is a link you can check out from medium.com on the same issue: the article link
The support for react hooks does increase your size by 1.5kb but your code is less now

Where in my meteor project do I instantiate Globalize

Stack: Meteor, React, Redux, React Router
Question: Where (i.e. in which file) do I instantiate Globalize? I am no expert on Globalize, but it feels like this is a somewhat global variable. So where does it go?
More generally speaking I am a bit confused as to where to put global variables in react/meteor applications. I get the whole component idea. And I write a component within its module, I import all the stuff I need and I export the component. Easy enough. However, where does the more general stuff go? Is there anything I could read up on?
Cheers

How do you manage several ReactJS projects?

Background: My company's web-app is in fact several completely separated apps that have minimal effect on one another. That's why it doesn't make any sense to keep them under a single project - so I'm using separate projects. However, since I started migrating and writing new apps in ReactJS (using Webpack for bundling) I find many opportunities for reuse, in order to avoid code duplication and to avoid downloading common resources again after another app already fetched them:
I'm using specific versions of 3rd party npm modules - so no reason to bundle them over and over again - and no reason to upload them to the server more than once (for all the projects).
How do you share package.json fixed versions across projects?
Do you bundle all/groups of npm modules together or each separately? I want to get everything from the server for cases of on-premise deployment.
What measures to you take to make sure you don't forget to re-bundle the node modules in case you decided to update one of them?
Similar question goes for font files (keeping the font on the server and another font for icons)
common style sheets
common JS code - like utils & common
common web.config configurations
common images (currently some of them are inline in different bundles)
and last - common components - how do you share them? Do you use a separate project and publish to npm? symlink?
Or maybe, after all, I should go with a monorepo? And how?

You could create a separate project, my_modules, which is just a manifest of the shared, common packages. You'd have a package.json with all the common modules, and a single index.js which does something like:
import React, { Component, PropTypes } from 'react';
import moment from 'moment';
export { React, Component, PropTypes, moment };
Then, you'd publish this new my_modules project to github, and install that in your other projects.
import { React, Component, PropTypes } from 'my-modules';
Every time you change a package, you'd increment the version, and then update that version in your projects (which is still a bit of a pain, but you could use something like greenkeeper.io to ensure they don't get stale).
Similarly, you can do the same thing for just about everything else you've mentioned, although you don't want to go overboard with this; you should only share standard assets that doesn't change very often, and keep project-specific assets in their own repo.
EDIT: wanted to add, for React components, this is actually a really good practice, because it forces you to write generalized, independent components. You can use something like React Storybook to create these components in isolation. You can publish one master package with all the packages, individual components as packages, or somewhere in between (eg. all Form components in one package). Either way, though, they can still share a repo for convenience.

Resources