diff --git a/content/blog/how-to-spot-react-rendering-performance-issues/index.md b/content/blog/how-to-spot-react-rendering-performance-issues/index.md new file mode 100644 index 0000000..ab3e521 --- /dev/null +++ b/content/blog/how-to-spot-react-rendering-performance-issues/index.md @@ -0,0 +1,23 @@ +--- +title: How to deal with React rendering performance issues? +author: Angel Sucapuca +authorTitle: Software Engineer +date: 2022-09-27T22:04:41.197Z +description: Tips on what to do when you experience rendering performance issues + on your React application +--- +![Sand clock](towfiqu-barbhuiya-cv1izqkjqzu-unsplash.jpg "Sand clock") + +Imagine you are working on your React application, you click a button or start typing on an input and you see a delay on the response, then you open the network tab and is not backend's fault! Well, you are experiencing rendering performance issues. This scenario is not common at the early stages of development, however as time passes and the application evolves (more features are added, more libraries are used) rendering performance issues become a thing. + +If is your first time trying to solve rendering performance issues on a React application this post post is for you. You will find useful tips on how to spot them and what to do to solve them. + +**Install React DevTools** + +**Why the component re-rendered?** + +**Record your actions** + +**Spot slow or unnecessary re-renders** + +**Memoization to the rescue!** \ No newline at end of file diff --git a/content/blog/how-to-spot-react-rendering-performance-issues/towfiqu-barbhuiya-cv1izqkjqzu-unsplash.jpg b/content/blog/how-to-spot-react-rendering-performance-issues/towfiqu-barbhuiya-cv1izqkjqzu-unsplash.jpg new file mode 100644 index 0000000..18cde27 Binary files /dev/null and b/content/blog/how-to-spot-react-rendering-performance-issues/towfiqu-barbhuiya-cv1izqkjqzu-unsplash.jpg differ