1) Avoid using the index as a key for the map
2) Analyzing and optimizing Webpack Bundle Bloat
3) Using Immutable Data Structures
4) Use React.Fragments
1) Avoid using the index as a key for the map
We often see index being used as a key when rendering a list. But using the key as the index may show your app incorrect data as it is being used to identify DOM elements. Whenever you push or remove an item from the list if the key is the same as before, React assumes that the DOM element represents the same component, it is always advisable to use a unique property like id as a key.
2) Analyzing and optimizing Webpack Bundle Bloat
If you use are using Webpack, you should check and analyze your application bundle to remove the plugins or modules that aren’t needed. You can consider using Webpack Bundle Analyzer, which helps you to visualize the size of webpack output files with an interactive zoomable treemap, I love it
3) Using Immutable Data Structures
There is a lot to learn about Immutable Data Structures, Data immutability comes from the functional programming world. I will strongly recommend you to read about "Data immutability" as there is a lot to talk about.
4) Use React.Fragments
I asked myself why use React Fragment when I could just use div, bcos I'm curious and passionate about web performance, made some research, and I discover div created additional HTML element wrappers, so div is slightly lower in performance.
Top comments (0)