Why React Re-Renders?

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 🙂