🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆

This video just came out of my own observation of multiple page re-renders in the sample application I was working on as part of this series.

I know that getting obsessed with page renders can get to be problematic, but what I observed provided an easy way for me to talk about useMemo and useCallback React Hooks.

Pass a “create” function and an array of dependencies. useMemo will only recompute the memoized value when one of the dependencies has changed. This optimization helps to avoid expensive calculations on every render.

In the Tab Application in Ionic Framework, the tabs are loaded and kept in the DOM, so you will see page renders happening on all of the tabs as you switch tabs. In this video I show how you optimize some of the rendering in in the tabs for better performance as the application becomes more complex.

Video Series

Goto Playlist for Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor

React Documentation Referenced

https://reactjs.org/docs/hooks-reference.html#usecallback
https://reactjs.org/docs/hooks-reference.html#usememo