React child component does not re-render when props passed in from parent changes

Question

I have a simplified react structure as below where I expect MyGrandChildComponent to re-render based on changes to the 'list' property of MyParentComponent. I can see the list take new value in MyParentComponent and MyChildComponent. However, it doesnt even hit the return function of MyGrandChildComponent. Am i missing something here?

const MyGrandChildComponent = (props) => {
    return (
        <div>props.list.listName</div>
    );
};
const MyChildComponent = (props) => {
    return (
        <div><MyGrandChildComponent list={props.list}/></div>
    );
}

const MyParentComponent = (props) => {
    const list = { listName: 'MyList' };
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

Answer 1

In your MyParentComponent, the list is not a state variable and as such changing it will not even cause a re-render. If you absolutely want that when ever you change the value of list it re renders, then you will want to bring state to your functional component and the way to do that is to use hooks. In this case your parent component will be something like below

import React, {useState} from 'react'
const MyParentComponent = (props) => {
    const [list, setList] =  useState({ listName: 'MyList' });
    return (
        <div><MyChildComponent list={list} /></div>
    );
}

then at the child component you render it as I suggested in the comment above.

The parent needs to hold the list as a state variable and not just as a local variable. This is because react rerenders based on a state or prop change and at the parent you can only hold it in the state. With this when the value of list changes there will be a re-render which will then propergate the change to the children and grandchildren. Also the only way of maintaining state in a functional component is to use hooks.