Top 10 Optimizing Techniques Every React developer should know! Tips to optimize your ReactJS App.

Eli Elad Elrom
Master React
Published in
27 min readNov 7, 2020

--

By the end of this article, you will know how to precache, lazy loading, code splitting, tree shaking, prefetching, sprite splitting as well as dead code and side effects cleaning among other things for React App — and I am not double-talking with you.

Optimizing code is the next level and an advanced topic and needed to ensure we deliver a quality product that lowers our footprint and loads our app faster, In this article, I will give you optimizing techniques efforts you should be aware of before you write your first line of code.

Photo credit: Getty images.

Why do we need to optimize?

CRA is a popular way to create a React App, it is opinionated and set to manage your configuration of our App using react-scrips, it utilizing WebPack techniques to optimize the production build and include minifying, uglify, gzipped, and you don’t need to do much it’s all out of the box.

On top of that, you should already be automating your development and deployment effort: setting ESlint, Huskey, Unit Testing, E2E testing, checking code quality, and other efforts to identify poor coding and weak spots (see here).

However, with all of that, CRA is still vanilla flavor one size fits all and there are…

--

--