Ogundipe Samuel wrote this piece about optimization in React. One key factor for positive user experience is speed e.g. how much time a user has to wait to first see contents from your website or application.
With the help of some inbuilt APIs like React.Component, React.PureComponent and life-cycle methods React offers, we can optimize our components to ensure fast and efficient load times in our applications.
In this tutorial, we will learn various optimization methods that use these inbuilt APIs, lifecycle methods and some other general techniques that ensure you improve your React code.
The article covers:
- How to use React.Fragment to avoid adding extra nodes to the DOM
- Use React.Suspense and React.Lazy to load components declaratively
- Use React Suspense
- Prevent unnecessary re-rendering with shouldComponentUpdate()
- Use React.PureComponent
- Remove unused DOM elements with ComponentDidUnmount()
- Use React.Memo to cache components
In this tutorial, you explored several ways we can optimize our React components for better performance. Nice!
[Read More]