Performance - Avoiding First Render Computation
Explore techniques to optimize React app performance by avoiding redundant computations on first render. Understand how to use React hooks such as useEffect and useRef to control side-effect execution, and prevent unnecessary re-renders. Learn practical approaches to maintain efficient React applications as they grow.
We'll cover the following...
Once a React application grows, maintenance becomes a priority. To prepare for this eventuality, we’ll cover performance optimization, type safety, testing, and project structure. Each can strengthen your app to take on more functionality without losing quality.
Performance optimization prevents applications from slowing down by assuring efficient use of the available resource. Typed programming languages like TypeScript detect bugs earlier in the feedback loop. Testing gives us more explicit feedback than typed programming and provides a way to understand which actions can break the application. Lastly, the project structure supports the organized management of assets into folders and files, which is especially useful in scenarios where team members work in different domains.
Performance in React
This section is just here for the sake of learning about performance improvements in React. We wouldn’t need optimizations in most React applications, as React is fast out of the box. While more sophisticated tools exist for performance measurements in JavaScript and React, we will stick to a simple console.log() and our browser’s developer tools for the logging output.
Don’t run on first render
Previously we covered React’s useEffect Hook, which is used for side-effects. It runs the first time a component renders (mounting), and then every re-render (updating). By passing an empty dependency array to it ...