10 Tips For FASTER React App

on this video i will reveal 10 tips or techniques to enhance the performance of your react applications and take it to the next level tip number one virtualizing or windowing list a common requirement in web application is to display a list of data or table that may scroll up and down rendering a large set of data will degrade applications performance if you load every single item all at once this could freeze or crash the browser especially in less powerful devices with more complex layouts a great solution is virtualization or windowing which is a technique to render only the items that are visible to the user imagine hundreds or thousands of items that needs to be displayed we can choose to render small amount of items that only fits on that window until you scroll to see the rest of the items we may even add scrolling indicators and load the actual items when the user stops scrolling just like what you see on the screen the good news is that you don't have to implement this solution yourself you may use these popular windowing libraries like react window and react virtualized to your advantage you can also create your custom windowing solution if you want something that is more tailored to your application specific use case as well tip number two react suspense and react lazy for lazy loading components lazy loading is a great technique for optimizing and speeding up the render time of your application the idea of lazy loading is to load a component only when it's needed react comes bundled with the react lazy api so that you can render a dynamic import as a regular component so instead of loading your regular component like this you can do it like this to cut down the risk of performance by using the lazy method to render a component lazy component is typically rendered inside a suspense component which allows you to add a fallback content as a loading state while waiting for the lazy component to load tip number three dependency optimization one often overlooked aspect of software development is how much programmers rely on open source libraries and packages for ready-to-use code sometimes it is a little too much instead of writing code from scratch or even copying and pasting code from one program to another some programmers still rely on what is called a dependency for example the lowdash library let's say we only need three of the 100 methods from the library having all extra methods in the final bundle is not optimal we may use lowdash webpack login to remove unused function and customize a build for us this will produce a smaller build of the library it's worth checking how much code you are actually utilizing from dependencies when optimizing the application bundle size also it is a good idea to monitor and remove dependencies that is no longer used sometimes the best dependencies is no dependencies at all tip number four memoi store frequent interacting with the store retrieving the same data is redundant and needs to be avoided memoization is a technique that is often applied to the application but it can also be applied to store like redux and other state management libraries for example reselect library exports create selector that would generate memoi selector functions these selectors will remember the arguments passed in the last time it was invoked and it doesn't recalculate if arguments are the same re-reselect would take this further if deeper memoization and cash management is required this will solve the issue with reselect as it has a caching limit of 1 which means switching between different arguments using standard reselect selectors causes cache invalidation both of these libraries offer great solution for caching but you may choose the solution that depends on your use case tip number five avoid unnecessary component renders unnecessary re-rendering react component is a common problem in react when a component re-renders react will also re-render its child component by default this will slow the app and make the user of the app frustrated no one wants to use an app that is laggy and feel unresponsive to prevent this from happening functional components can use react memo to ensure the component is only re-rendered when its props change class-based components can utilize react pure component to get the same effect also you can return false from should component update instead if you know that in some situation that the component doesn't need to update to skip the whole rendering process including calling render on components tip number six use production build react includes many helpful warnings that are very useful in development by default however they make react larger and slower so you should make sure to use the production version when you deploy the app installing react developer tools for chrome is a good extension to verify if your build process is set up correctly if you visit a site with react in production mode the icon will have a dark background react in development mode will have a red background on the icon tip number seven keep state local instead of store it is easy to get carried away and dumping most of the state of the application to state management libraries keeping the state to the component locally is preferable and will always be faster than using a global store twitter knows this very well this one optimization alone reduced their overhead by 50 which is drastic and good for users of their app while this may not hurt desktop computer much a small mobile device will take an obvious performance hit before storing a state to the store always check if it can be avoided tip number eight using a cdn a cdn is a great way to deliver static content to your audience more quickly and efficiently having content delivered by cdn will reduce bandwidth cost improve page load times and increase global availability of content react js applications will tremendously benefit from cdn as they will receive files from a server that is geographically close to them cached fast and have very low latency the best and fastest react.js application will look slow if the servers cannot speed up the delivery of static content to the users tip number nine react fragments react requires a surrounding container for every components we create from version 16.2 it is no longer needed because of react fragments fragments avoid creating an extra unnecessary dom node which is good for memory every little nodes that we can save adds up easily making our react application cleaner and speedy tip number 10 using web workers extensive tasks or operations can block the execution of an app javascript is a single traded language which executes one statement at a time that means script or code must finish executing before moving into the next react is not an exception to this rule web workers make it possible to run a process in web applications background thread separate from the single execution tread our program is able to run without being blocked or slowed down to achieve parallel compute by performing the laborous processing in a separate tread react applications can take advantage of web workers to delegate extensive tasks in the background as it will not affect page performance react uses several clever techniques to ensure the app we create is performant not everything is free so we also have to be mindful of things that may slow react.js like excessive re-rendering and other areas we can optimize for performance if you are in the job market and need some refresher with react i created a couple of videos for the most commonly asked questions being asked in an interview also here is a video to help you get ready for the coding part of the interview i hope that you find these optimizing techniques useful if you are new to this channel please like this video and subscribe to my channel to help me grow and reach others thank you for watching and you may click and watch some of my videos as well

Channel: A Software Engineer

Views: 30,185

Keywords: react, reactjs, react performance, react performance optimization, react performance optimization techniques, front end developer, javascript library, reactjs tutorial, react optimization, react memoization, react fragment, react lazy loading, react lazy and suspense, js, js tutorial, javascript tutorial, react problems, javascript libraries, react js tutorial, react best practices, web developer, react tutorial, learn react, react tips, learn reactjs, react js

Id: rBhKb9JE8z0

Length: 8min 20sec (500 seconds)

Published: Wed Feb 09 2022