- Dan Dobos
How to optimize your React Application for speed and efficiency
Updated: Nov 19, 2020
There comes a time in every react developer's life when it encounters performance issues. Maybe a page takes too long to load or components re-render way too many times. Now it's your job to solve it. Let me share a few with you. 1. Learn how to use Chrome DevTools Let's start with understanding the lightroom tab in your chrome browser. As you
you can see it can give you a lot of information. DevTools can help you edit pages on-the-fly and diagnose problems quickly.

2. Use React.lazy and React.Suspense for code-splitting
You can avoid loading code that the user may never need and at the same time save a lot of resources. This can be done in the route as well as for the component as shown below.
import React, { Suspense, lazy } from 'react';
const Component = lazy(() => import('./Component'));
const Page = () => (
<Suspense fallback={<Spinner />}>
<Component />
</Suspense>
)
export default Page;
3. Use React.memo
It memoizes the rendered output then skips unnecessary rendering if your component renders the same result given the same props.
const Component = React.memo(function Component(props) {
// render using props
});
4. Use React.useMemo, React.useCallback
Both hooks receive a function as its first argument and a dependency array as the second one, the main difference is that useCallback returns the function without calling it, and useMemo returns the function's result.The hook will return a new value only if the dependencies value changes.
const memoizedValue =
useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback =
useCallback(() => {doSomething(a, b);}, [a, b]);
5. Use React.useRef
useState and useRef are data hooks, both keep the information after re-render but only useState causes re-renders. useRef returns a mutable ref object whose .current property is initialised to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
const refContainer = useRef(initialValue);
6. Avoid Anonymous Functions and Object Literals
JavaScript allocates new memory each time these components are re-rendered. Try using named functions and named objects.
//this will use the same location in memory
const handleClick = () => console.log('same location in memory');
<button onClick={handleClick}></button>
//this will use a different location in memory
<button onClick={
() => console.log('different location in memory')}>
</button>
7. Avoid Frequent Mounting-Unmounting
//use this properties
visibility:"none"
opacity: 0
8. Use React.Fragment or it's short syntax <>
Fragments let you group a list of children without adding extra nodes to the DOM.
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
9. Use reselect to memoize Redux selectors
A selector is not recomputed unless one of its arguments changes, can be used as input to other selectors, and allow Redux to store the minimal possible state.
import { createSelector } from 'reselect'
const mySelector = createSelector(
state => state.values.value1,
state => state.values.value2,
(value1, value2) => value1 + value2
);
10. Batch Redux actions
Multiple actions dispatched outside of React only result in a single render update.
import { batch } from 'react-redux'
function myThunk() {
return (dispatch, getState) => {
// should only result in one combined re-render, not two
batch(() => {
dispatch(increment())
dispatch(increment())
})
}
}
Thank you for reading this post! I hope you find at least some of my recommendations useful! For improvements or other article suggestions, you can contact me on Linkedin
#react #redux #performance #optimization