181 likes
·
4.6K reads
23 comments
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.
Thanks Azmath
Thanks, Atharva. It's tremendous and understandable for anyone new to React concept. Keep sharing these kinds of topics
Thanks Thomas
Great article!!
Thanks Ankush
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
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#usee…
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.
also could you explain a bit more on what can we consider as expensive operation? In your example with useContext you have used setState as an expensive operation. Is that just for example or actual? How do we differentiate between expensive and non-expensive operations?
Atharva Bhuse thanks for answering my questions Atharva👍
Thanks Jayesh
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!!
Thanks Men such a rich articles
Thanks Sahil
This article really helps me to get deep a knowledge of React
Thanks Eshan