Reduce React re-render with memo, useMemo and useCallback

React re-render can lead to poor App responsiveness especially when the App has lots of components and complex logics.

React rendering

First, let’s understand what is re-render. React keeps a virtual DOM tree that projects the real DOM structure in HTML. When the render() method is called, React will convert all the virtual DOM elements to HTML elements and inject them to the page.
React is not going to re-convert the entire virtual DOM tree over and over again, instead it only converts the parts…