Is your react app really production optimized?
React apps are viewed as client-side applications. But many of us often forget that it is the sole library that when paired with other libraries makes a perfect application that matches your business needs.
Today I would like to discuss some tips that can make your application production ready, and share some principles set by React that make your app highly optimized and efficient for production.
1. React with Typescript:
If you are not aware of TS: TS is a strongly typed language. It gives you an additional set of features and runs wherever javascript runs. Make no mistake it does not run on the browser, it will give out a javascript file that you may run on the browser and another important feature is catching your errors in the code editor itself.
One of the most important steps you can take when creating a react app is to create it with a typescript setup. Eventually, sometime in future, you will figure out that a type-safe application will make your team more efficient and reduces bugs by a whole lot.
2. useMemo and memo:
useMemo and memo are used in react for memoization.
In plain English, memoization returns a cached value unless any dependencies or props change in terms of react application.
1. useMemo: this react hook comes out of the box in react and can be used to create a cached value to make sure your variable is not initialized every time a render occurs.
2. memo: memo is a HOC (high order component) used to wrap a react component. It will only re-render the component only if there is a change in the props. It takes also an optional function that receives previous and next props and it should return a boolean value to determine re-rendering. This way you are in the driver's seat and take control of whether to re-render the component on not…
3. useCallback:
useCallback is a react hook that takes in a function prop and an array of dependencies used inside the function prop. Just like the useMemo hook, this hook will return a memoized callback which will change the function only if there is a change in the dependencies.
4. Linting:
Lets say there is not just you working on your big startup idea anymore there's a whole team now(woo hoo!) and many other developers will work on the code that you wrote. But now there is no way for you to know that the coding standards your followed will be followed by your fellow teammates anymore. This is where linting walks through the door. All you have to do is setup the lint config and add a pre-commit hook using husky and whenever a teammate makes a commit lint will either fix a fixable problem or throw and error and exit the commit.
This ensures code readability, functionality and maintainability.
5. .env variables
Your projects has keys, tokens, db uri’s, etc. These include sensitive information that have no place to be in the public record. Hence we never code them in our application. We add those key value pairs to .env files (environment variables) and then import them into our application. The method varies from how your app is setup so check out the documentation accordingly.
6. Bonus: Next.js
What is Next.js? — Next js is a react framework that allows us to create dynamic server render pages using react syntactic sugar.
Why use Next.js? — The internet is a SEO race, the more pages getting server render = higher SEO rankings.
Next.js has many features — SSR, SSG, meta tags, image optimization, routing, pages.
I hope you liked this quick article. If you have any suggestions I’m always ready to hear out.
Connect with me
Personal site: https://yashgkar.vercel.app
GitHub: https://github.com/yashgkar
LinkedIn: https://www.linkedin.com/in/yashgarudkar/
Twitter: https://twitter.com/codeitachi
