React组件渲染次数日志意外多次输出问题咨询

嘿各位，我最近写React组件的时候碰到了个闹心的小问题，想请大伙帮忙分析下。先把我写的代码贴出来：

import React, { useEffect, useRef, useState, memo } from 'react';  

const ExpensiveComponent = memo(({ onRender }) => {  
  useEffect(() => {  
    onRender();  
  }, [onRender]);  

  return <div>Expensive component</div>;  
});  

export default function App() {  
  const renderCountRef = useRef(0);  
  const [count, setCount] = useState(0);  

  const handleRender = () => {  
    renderCountRef.current += 1;  
    console.log('Component render count:', renderCountRef.current);  
  };  

  return (
    <div>
      <button onClick={() => setCount(prev => prev + 1)}>点击更新计数</button>
      <ExpensiveComponent onRender={handleRender} />
    </div>
  );
}

我原本预想的是，每次点击按钮触发count更新时，日志应该只输出一次渲染次数，但实际运行时却发现日志会意外多次打印——比如点一次按钮，可能会看到两次相同的日志输出，这完全和我预期的不一样。

我自己琢磨了半天，猜测会不会是handleRender函数每次App组件重新渲染时都会被重新创建，导致传给ExpensiveComponent的onRender prop引用变了，虽然用了memo但没起到阻止重复渲染的作用？另外会不会和React严格模式在开发环境下的重复执行机制有关？

有没有大佬能帮我理清楚这个问题的根因，再给个可行的解决办法呀？

内容来源于stack exchange