javascript - Functional Component child component does not re-rendered after its props is updated by its Parent

Question

In the code below:

ParentComponent.js

let childData = 0;

function ParentComponent() {
    function handleClick() {
        childData++;
    }

    return (<>
        <button onClick={handleClick}>Increment</button>
        <ChildComponent data={childData} />
    </>);
    }

ChildComponent.js

export default function ChildComponent(props) {
    return(<p>Child Component: {props.data}</p>);
}

Why after clicking Increment button the child component still shows the old value and does not re-render?

question from:https://stackoverflow.com/questions/65648469/functional-component-child-component-does-not-re-rendered-after-its-props-is-upd

Answer 1

Issue

React components only re-render when state and/or props update. Since ContainerComponent has no state and the graphData prop doesn't change then ContainerComponent never rerenders, nor do its children.

Solution

Add state to ContainerComponent. When the filtedData state is updated then ContainerComponent will rerender, along with the children.

function ContainerComponent(props) {
  const { graphData } = props;
  const [filteredData, setFilteredData] = React.useState([...graphData]);
  function handleClick() {
    setFilteredData((data) => data.filter((x) => x > 0));
  }

  return (
    <>
      <button onClick={handleClick}>Filter</button>
      <GraphComponent data={graphData} />
      <TableComponent data={filteredData} />
    </>
  );
}

Answer for your edited question

let childData = 0;

function ContainerComponent() {
    function handleClick() {
        childData++;
    }

    return (<>
        <button onClick={handleClick}>Increment</button>
        <ChildComponent data={childData} />
    </>);
}

childData won't work either since now the object reference never changes, you just mutate the same reference each time. You would need to store childData in component state, and update it to get the component to rerender.