All components re-rendering when only a single state variable is updated

Question

I have a page which displays some data retrieved every 180 seconds (3 minutes) from an API. When the page loads I have an initial useEffect hook to call the retrieveData() function. Then, using the below code and a state variable called elapsed, I start an interval for the 180 seconds. Every one second, I update a progress bar which is counting down from 3 minutes and displays the remaining time. This uses the elapsed state variable.

This is the hook to start the interval:

useEffect(() => {
    const interval = setInterval(() => {
      if (elapsed < dataUpdateInterval) {
        setElapsed(elapsed + 1);
      } else {
        setElapsed(0);
        retrieveData();
      }
    }, 1000);
    return () => clearInterval(interval);
  }, [elapsed]);

My question is, why are the rest of the components on the page being re-rendered on each tick of the interval? I thought that since I'm only updating the elapsed state variable, only those component will update that use that state variable. My table which is displaying the data (stored in another state variable) should only update every 3 minutes.

Happy to provide other info if this is not enough to go off of.

UPDATE 1: In the dev tools, the reason I get for the re-render is "Hooks changed"

UPDATE 2: Below is a snippet of the code where this timer is used. The StatusList and StatusListItem components use React.memo and are functional components. The status list is an IonList and the StatusListItem is an IonItem at top level (from Ionic)

import React, { useEffect, useState } from "react";
import { Layout } from "antd";
import StatusListItemNumbered from "./StatusListItemNumbered";
import { Container, Row, Col } from "react-bootstrap";
import StatusList from "./StatusList";
import { Progress } from "antd";
import moment from "moment";

const Content = React.memo(() => {
  const dataUpdateInterval = 180;

  const [elapsed, setElapsed] = useState(0);
  const [data, setData] = useState();

  const timeLeft = (interval, elapsed) => {
    let time = moment.duration(interval - elapsed, "seconds");
    return moment.utc(time.asMilliseconds()).format("mm:ss");
  };

  const retrieveData = () => {
    console.log("Retrieving data");
    SomeApi.getData().then(items => {
        setData(items);
    })
  };

  //The effect hook responsible for the timer
  useEffect(() => {
    setTimeout(() => {
      if (elapsed < dataUpdateInterval) {
        setElapsed(elapsed + 1);
      } else {
        setElapsed(0);
        retrieveData();
      }
    }, 1000);
  }, [elapsed]);

  //Retrieve data the very first time the component loads.
  useEffect(() => {
    retrieveData();
  }, []);

  //Component styling
  return (
    <Layout.Content style={{ padding: "20px 20px" }}>
      <div className={css(styles.siteLayoutContent)}>
        <Container className={css(styles.mainContainer)}>
          <Row className={css(styles.progressRow)}>
            <Col>
              <Progress
                style={{ marginLeft: "17px", width: "99%" }}
                strokeColor={{
                  "0%": "#108ee9",
                  "100%": "#87d068",
                }}
                percent={(100 / dataUpdateInterval) * elapsed}
                format={() => `${timeLeft(dataUpdateInterval, elapsed)}`}
              />
            </Col>
          </Row>
          <Row>
            <Col sm={6}>
              <StatusList listName="Data">
                {data &&
                  data.map((item, index) => {
                    return (
                      <StatusListItemNumbered
                        key={index}
                        value={item.count}
                        label={item.company}
                      />
                    );
                  })}
              </StatusList>
            </Col>
          </Row>
        </Container>
      </div>
    </Layout.Content>
  );
});

export default Content;

Answer 1

I would start with removing the elapsed from dependency array, as you run the hook every second, again for no reason. Then we would probably have to see the whole component, either paste it here, or use something like https://codesandbox.io/ for minimal repro example

Answer 2

According to the comments section:

So it looks like that data.map in the render is the culprit. Why would that cause a re-render of my list items? Once I moved the data.map into the StatusList component instead of passing the items in as props.children, it stopped re-rendering

In the case of the OP, the issue is with regards to the usage of props.children on a React.memo wrapped component. Since the React.memo only shallowly compares props, the React.memo wrapped child component will still re-render.

See my example snippet below. Only 1 rerender will trigger on update of state and that is the 1st ChildComponent which is passed an object as children prop.

let number_of_renders = 0;

const ChildComponent = React.memo((props) => {
  number_of_renders++;
  React.useEffect(()=>{
    console.log("ChildComponent renders: " + number_of_renders)
  })
  return (
    <div></div>
  )
})

const App = () => {
  const [obj, setObj] = React.useState({ key: "tree", val: "narra" });
  
  const [primitiveData, setPrimitiveData] = React.useState(0)
  
  return (
    <React.Fragment>
      <button onClick={()=>setObj({ key: "tree", val: "narra" })}>Update Object</button>
      <button onClick={()=>setPrimitiveData(primitiveData + 1)}>Update Primitive Data</button>
      <ChildComponent>
        {obj}
      </ChildComponent>
      <ChildComponent>
        {obj.val}
      </ChildComponent>
      <ChildComponent>
        primitiveData
      </ChildComponent>
    </React.Fragment>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Issue that briefly discusses usage of props.children in a React memo: https://github.com/facebook/react/issues/14463

---

By default if the parent re-renders, the child components will trigger their respective render as well. The difference in React is: although in this scenario the re-render occurs for the child component, the DOM is not updated. The re-rendering is evident in the following example where the ChildComponent does not even have a prop and therefore does not use the parent's state:

const ChildComponent = () => {
  React.useEffect(()=>{
    console.log("ChildComponent rerender")
  })
  return (
    <div>Child Component</div>
  )
}

const App = () => {
  const [state, setState] = React.useState(true);
  
  return (
    <React.Fragment>
      <button onClick={()=>setState(!state)}>Update State</button>
      <ChildComponent/>
    </React.Fragment>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

If you do not want renders to get triggered on the Child components if they are unaffacted by the state changes of the parent, you can use React.memo

const ChildComponent = React.memo((props) => {
  React.useEffect(()=>{
    console.log("ChildComponent rerender")
  })
  return (
    <div>Child Component</div>
  )
})

const TheStateDependentChild = React.memo((props) => {
  React.useEffect(()=>{
    console.log("TheStateDependentChild rerender")
  })
  return (
    <div>TheStateDependentChild Component</div>
  )
})

const App = () => {
  const [state, setState] = React.useState(true);
  
  return (
    <React.Fragment>
      <button onClick={()=>setState(!state)}>Update State</button>
      <ChildComponent/>
      <TheStateDependentChild sampleProp={state}/>
    </React.Fragment>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>