loading...

Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Optimize Page Rendering with useMemo

aaronksaunders profile image Aaron K Saunders ・1 min read

Learn To Build Mobile Apps with Ionic Framework & ReactJS Video (5 Part Series)

1) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series 2) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series: Pt1 3) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series: Pt2 4) Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Optimize Page Rendering with useMemo 5) Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Manage Authentication State using React Context API

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

Learn To Build Mobile Apps with Ionic Framework & ReactJS Video (5 Part Series)

1) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series 2) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series: Pt1 3) Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series: Pt2 4) Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Optimize Page Rendering with useMemo 5) Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Manage Authentication State using React Context API

Posted on May 25 by:

aaronksaunders profile

Aaron K Saunders

@aaronksaunders

See more, like and subscribe 👉🏾 ‪Aaron Saunders 📺 https://www.youtube.com/aaronsaundersci?sub_confirmation=1

Discussion

markdown guide