метод рендеринга вызван для панели, которая не будет отображаться

Question

Я использую компонент Ant Design Tabs . Я заметил, что при изменении активной вкладки метод render вызывается НЕ ТОЛЬКО для отображения новой вкладки, а ТАКЖЕ на вкладке, которая должна быть скрыта. Это даже с опциями destroyInactiveTabPane и forceRender={false} (в любом случае второй по умолчанию). Это вызывает проблемы в моем приложении React Redux, поскольку я написал селекторы для определенных компонентов, предполагая, что компонент будет отображаться ТОЛЬКО, когда приложение находится в заданном состоянии.

SSCCE предоставляется в this песочница кода .

Когда вы выбираете другую вкладку, вы увидите из сообщений журнала консоли, что визуализируются ДВА компонента панели, а не только ОДИН. По какой-то причине каждый из них также визуализируется ДВАЖДЫ. эта песочница но она некрасива.

Для полноты картины я добавляю ниже код песочницы:

import React from "react";
import { Tabs } from "antd";
import "./styles.css";
 
export default function App() {
  return (
    <div className="App">
      <Demo />
    </div>
  );
}

const { TabPane } = Tabs;

class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { key: "1", i: 0 };
  }
  onChange = key => {
     this.setState({ key, i: this.state.i + 3 });
  };
  render() {
     return (
       <Tabs
         activeKey={this.state.key}
         defaultActiveKey="1"
         onChange={this.onChange}
         destroyInactiveTabPane
       >
         <TabPane tab="Tab 1" key="1" forceRender={false}>
           <Foo id={this.state.i} />
         </TabPane>
         <TabPane tab="Tab 2" key="2" forceRender={false}>
           <Foo id={this.state.i + 1} />
         </TabPane>
         <TabPane tab="Tab 3" key="3" forceRender={false}>
           <Foo id={this.state.i + 2} />
         </TabPane>
       </Tabs>
     );
   }
 }

class Foo extends React.PureComponent {
   render() {
      console.log(`foo: render ${this.props.id}`);
     return <span>foo - {this.props.id}</span>;
   }
}