Discussion on "A Beginner guide to Mastering Re-rendering in React"

Atharva Bhuse · 2023-01-31T13:59:58.791Z

I had been working professionally with React for a year now, and while I have been able to build functional and feature-rich applications, I realized that I didn't have a solid understanding of how React's re-rendering process works. I think this is ...

This article really helps me to get deep a knowledge of React

Understanding re-renders is always a bit difficult but this article made it really really easy! Thanks a lot Atharva, I learned something new today.

Atharva Bhuse thanks for answering my questions Atharva👍

Hello Jayesh, I would be happy to help you with that. Expensive operations are those operations that take longer time to execute such as complicated functions in component, API all with larger amount of data. setState can be an expensive function and we can avoid it by simply batching multiple states with single setState. we can also use useMemo() hook to decrease number of re-renders. Thanks Jayesh for your question, have a great day!!

Can you provide any reference or docs where there is more detail about the {lazy: true} argument in useEffect ?

Here you will find details- reactjs.org/docs/hooks-reference.html

Atharva Bhuse Sorry, But I cant see the mention for lazy loading useEffect, can you please guide me

Here you will find details- reactjs.org/docs/hooks-reference.html

Hey! It was a great article! I just started out with React just last month. and I had a small doubt, would it be better to use a useRef hook when I have a form with around 5 or 6 fields? It doesn't re-render the component, right? but if we only need the value of the inputs onSubmit, so do we really need to re-render them? I am a beginner so I don't really know if it would be a good approach or not. I'd really appreciate your thoughts on this!

Hello Anmol, I would be happy to help you with that. Yes, you are right. useRef() does not re-render the component but it is still preferable to use useState() hook because it keeps component up-to-date with latest state. Even if you need value of the inputs on submit of the form, I will suggest to use useState() hook because it provides a better control on each input value change and corresponding behavior of submit button. For example you can display error messages and disable submit button if user is entering wrong input value. I would like to suggest you Formik and Yup libraries for state management and validating form inputs in React. Thanks Anmol for your question, have a great day!!

Thanks for recommending the libraries!! I'll be sure to use them the next time I have to manage a frame. Also, do you have a blog that details all the basic 10 react hooks? Atharva Bhuse

I don't have blog on this topic right now, but I will definitely consider your suggestion. Thanks Anmol

Great article! It provides a comprehensive overview of re-rendering in react, especially for beginner. The clear explanation and examples make it easy to understand the concept. Thank you for sharing.

Search Hashnode

A Beginner guide to Mastering Re-rendering in React

Responses(8)