React中点击按钮时Title组件为何会重复渲染两次？

点击App组件内的按钮时，Title组件会重复渲染两次，每次点击都会在控制台输出两次Title ~ title: React essentials。

Title组件代码 #

import React from 'react';

function Title({ title }: { title: string }) {
  console.log('Title ~ title:', title);
  return <> {title} </>;
}

export default Title;

App组件代码 #

import Title from './components/Title';
import { ICard } from './modals';
import { useState } from 'react';

function App() {
  const [selectedCardBody, setSelectedCardBody] = useState<ICard | null>(null);
  const cardData: ICard[] = [
    { name: 'test 1', body: 'my name is test 1' },
    { name: 'test 2', body: 'my name is test 2' },
  ];

  const onClickButton = (obj: ICard) => {
    setSelectedCardBody(obj);
  };

  return (
    <>
      <Title title='React essentials' />
      {cardData.map((card, index) => (
        <button key={index} onClick={() => onClickButton(card)}>
          {index}
        </button>
      ))}
      {selectedCardBody && selectedCardBody.body}
    </>
  );
}

export default App;

原因分析 #

• React严格模式的开发环境行为：在开发环境中，React Strict Mode会主动重复执行组件渲染、状态更新等操作，目的是检测代码中可能存在的副作用（比如未清理的定时器、重复订阅等）。这种重复执行仅在开发环境生效，生产环境不会有该行为。
• 子组件未做渲染优化：Title组件作为App的子组件，当App的selectedCardBody状态更新时，App会重新渲染。由于Title没有被React.memo包裹，它会跟随父组件一起重新渲染。结合Strict Mode的重复渲染机制，就会出现控制台日志输出两次的情况。

解决方案 #

• 忽略开发环境的重复日志：如果只是开发环境下的日志重复，属于Strict Mode的正常检测行为，无需额外处理，打包到生产环境后该现象会自动消失。
• 使用React.memo优化组件：若想在开发环境也避免不必要的重复渲染，可以用React.memo包裹Title组件，当组件的props没有变化时，React会跳过组件的重新渲染：

import React from 'react';

const Title = React.memo(function Title({ title }: { title: string }) {
  console.log('Title ~ title:', title);
  return <> {title} </>;
});

export default Title;

内容的提问来源于stack exchange，提问作者ShadaMon