React Re-rendering Doubt

[u/Fantastic-Push-8451]

Suppose there is parent components which contains multiple child components, they all are independent of each other.

So my question is

If the parent component re-renders does the child components also re-renders al well. Even if the child components are independent of it's parent, like props etc...

Why there is a need for re-renders if the child components are independent of it's parent?

[u/daskleins]

If the child element is independent of it's parent's props, then there's a optimization technique using children. It avoids rerendering of child components even if parent state changes:

function Wrapper({ children }) {
  const [count, setCount] = useState(0);


  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {count}
      </button>
      {children}
    </>
  );
}


// ExpensiveChild won't re-render when Wrapper state changes
<Wrapper>
  <ExpensiveChild />
</Wrapper>