When does React re-render the parent component?

user_3594588 0
Viewed 70

I'm currently learning React, and trying to get a sense of how components re-render. I have this parent component which renders three items. Each item just renders an <li>

function App() {
  console.log("Parent Rerendered");
  return (
    <div>
      <ul>
        <Item1 />
        <Item2 />
        <Item3 />
      </ul>
    </div>
  );
}

Item2 is a bit different because it also renders an "x" that will un-render the component when it's clicked:

function Item2() {
  const [visible, setVisible] = useState(true);

  const makeInvisible = () => {
    setVisible(false);
  };

  console.log("Item 2 Rerendered");

  return visible ? (
    <div>
      <li>
        Second Item <span onClick={makeInvisible}>X</span>
      </li>
    </div>
  ) : null;
}

When I test this in my browser and click the "x", I can see from the console that Item2 gets re-rendered. However, none of the other components get re-rendered including the parent component. However the parent component does change, so how does this happen without re-rendering it.

If that's a bit confusing, here's an illustration of the initial state, my expectations, and reality. What am I misunderstanding about how React re-renders components?

enter image description here

react-hooks reactjs javascript
2 Answers

A component rerenders when it sets state, or when its parent rerenders1. App has no state and no parent, so it will never rerender. It doesn't need to though. React saves the virtual DOM from the previous render, so it still knows that App is supposed to be a div surrounding a ul surrounding an Item1, Item2, and Item3. If the Item2 rerenders, and returns a null instead of a div, react will update the part of the real DOM that the Item2 is responsible for, by removing the div. The rest of the page remains intact

1) or if a context it consumes changes, or in a class component when you call forceUpdate. But for most cases, it's just state and parent that matter.

user_37948120

Instead of clicking onto <Item2 /> go to the Dev-tools -> Explorer -> select the Element and press delete. The view will also change, the gap will close, without react being involved at all.

React is responsible to update the DOM, the layout is done by the browser. So when <Item2 /> decides it wants to be rendered as null instead of a div>li (??? invalid markup ) and therefore removes the respective DOM-nodes, the browser will update the layout.

And the parent component has nothing to do with all that.

user_65672750
Related