Why React Re-Renders?
Hello there! 👋 I'm Anjan, a self-taught Front-End Developer with a knack for crafting intuitive and visually captivating web applications. While my journey into tech didn't start with a traditional computer science background, my unbridled passion for technology has guided me to where I am today. I take immense pride in the progress I've made. Front-end development has captured my heart, and I find joy in every line of code that brings designs to life.
Why React Re-Renders?
Start with a fundamental every re-render in React starts with a state change.
Re-renders only affect the component that owns the state + its descendants (if any).
Some developers believe that a component will re-render because its props change, although that is a valid reason, it is not quite true when a component renders it all descends also re-renders, regardless of whether the descends components have props or not (pure components). The descends components can be exported with React.memo to prevent unnecessary re-rendering. If any pure components have props as a static value (object or function) you can use useMemo or useCallback hook to prevent re-rendering.
Now What about context? Though some components have no props, if it uses a value form useContext If that state variable changes, a re-render will occur.
These are the fundamentals of React and why it re-renders.
If any of the points are incorrect, please feel free to correct me, as I am also learning, and I have learned this through reading many blogs and articles.
Thank you for your attention 🙂
