How to optimize your React Application for speed and efficiency

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