Setting state in parent lead to multiple useEffect runs

multiple-use-effect-issue.js

function Root() {
  const [increment, setIncrement] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setIncrement((inc) => inc + 1);
    }, 3000);
    return () => clearInterval(interval);
  }, []);

  return (
    <Fragment>
      Live counter: {increment}
      <br />
      <ArticlesWithMutipleRerenders />
    </Fragment>
  );
}

function ArticlesWithMultipleRerenders() {
  const [articles, setArticles] = useState([]);
  const db = DBConnection();

  useEffect(() => {
    console.count("get articles");
    db.getArticles().then(setArticles);
  }, [db]);

  return (
    <Fragment>
      {articles.map((article) => (
        <span key={article.title}>{article.title} </span>
      ))}
    </Fragment>
  );
}