does parent component re-renders when changes occur in child components?

user_13989819 0
Viewed 4090


I have a parent component which looks like this:

const Parent = () => {
    return (
       <Child_1 />
       <Child_2 />
   );
}

if any changes occur in one of the child components, will the Parent component re-renders ?

react-component reactjs
3 Answers

No, it will not re-render. If you pass any props to the component from the parent component and you update that prop in children or that prop update in the parent component so both will re-render. But if the data or state has no dependency on the parent component so it will not cause a re-render in the parent component.

user_113933220

State changes in Child component doesn't effect on the parent component, but when a state of parent component changes all the child components render.

user_180744360

The hooks of the child components will not affect the life cycle of the parent component, an example:

function Child(){
    const [active, setActive] = useState();
    console.log("Child re-render")
}

function Parent(){
    console.log("Parent re-render")
    return <Child />    
}

If you change the value of active in Child, the "Child re-render" log will appear, but not the "Parent re-render" log, because child re-renders do not affect the parent.

One thing to keep in mind is that re-renders of a parent component do affect its children.

user_197297480
Related