Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React with Tabs

Veröffentlicht am: 31 Oktober 2020
auf dem Kanal: Aaron Saunders
1,495
20

Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React with Tabs
#react #ionic #tutorial

We show an approach to managing page renders in an Ionic application, you can see the side effects in an application that has multiple tabs, but in general, it happens in all apps

💥 REACT IONIC PLAYLIST    • Ionic React Code Walkthrus and Tutorials   💥

00:00 - Intro - Problem
00:59 - The Code Begins
01:39 - Using React.memo to optimize rendering
03:23 - Using useEffect to load data when the component is first loaded
04:56 - Using Ionic React LifeCycleHooks
06:31 - Creating a state variable to indicate if the page is visible
09:30 - Wrap Up - Summary of Changes


From Ionic React Documentation - "Ionic might keep the page around in the DOM"
"For instance, componentDidMount fires the first time a page is displayed, but if you navigate away from the page Ionic might keep the page around in the DOM, and a subsequent visit to the page might not call componentDidMount again. This scenario is the main reason the Ionic lifecycle methods exist, to still give you a way to call logic when views enter and exit when the native framework's events might not fire."

💥 SOURCE CODE 💥
https://codesandbox.io/s/solution-re-...

💥 LINKS 💥
Original Question: https://stackoverflow.com/questions/6...
React Memo: https://reactjs.org/docs/react-api.ht...
Use React.memo() wisely: https://buff.ly/2Gj6XIx
React useEffect: https://reactjs.org/docs/hooks-refere...
Ionic ReactJS LifeCycles: https://ionicframework.com/docs/react...

💥 SOCIAL MEDIA 💥
Twitter -   / aaronksaunders  
LinkedIn -   / aaronksaunders  
GitHub - https://github.com/aaronksaunders
Blog - https://dev.to/aaronksaunders

💥 NEWSLETTER 💥
https://buff.ly/35bAMIf

#ionic #react #reactjs #tutorial #javascript #ionicframework #capacitor

~-~~-~~~-~~-~
Please watch: "Getting Started With Appwrite, Vue JS Ionic Framework & Capacitor"
   • Ionic Vue, Getting Started With Appwrite  
~-~~-~~~-~~-~


Auf dieser Seite können Sie das Online-Video Ionic React Tutorial: One Way To Optimize Page Renders In Ionic React with Tabs mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Aaron Saunders 31 Oktober 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,495 Mal angesehen und es wurde von 20 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!