бесконечный рендеринг в React

Как упоминает izb, основной причиной pb является бизнес-вызов, который выполняется на чистом компоненте, тогда как он просто загружен. Это потому, что ваш компонент принимает бизнес-решение ("я решаю, когда что-то должно быть показано в себе"). Это не очень хорошая практика в React, тем более, когда вы используете redux. Компонент должен быть максимально глупым и даже не решать, что делать и когда это делать.

Как я вижу в вашем проекте, вы неправильно работаете с компонентом и концепция контейнера. У вас не должно быть никакой логики в вашем контейнере, так как это должна быть просто оболочка глупого чистого компонента. Вот так:

import { connect, Dispatch } from "react-redux";
import { push, RouterAction, RouterState } from "react-router-redux";
import ApplicationBarComponent from "../components/ApplicationBar";

export function mapStateToProps({ routing }: { routing: RouterState }) {
    return routing;
}

export function mapDispatchToProps(dispatch: Dispatch<RouterAction>) {
    return {
        navigate: (payload: string) => dispatch(push(payload)),
    };
}
const tmp = connect(mapStateToProps, mapDispatchToProps);
export default tmp(ApplicationBarComponent);

и соответствующий компонент:

import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { StyleRules, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
import Tab from '@material-ui/core/Tab';
import Tabs from '@material-ui/core/Tabs';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import AccountCircle from '@material-ui/icons/AccountCircle';
import MenuIcon from '@material-ui/icons/Menu';
import autobind from "autobind-decorator";
import * as React from "react";
import { push, RouterState } from "react-router-redux";

const styles = (theme: Theme): StyleRules => ({
  flex: {
    flex: 1
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  root: {
    backgroundColor: theme.palette.background.paper,
    flexGrow: 1
  },
});
export interface IProps extends RouterState, WithStyles {
  navigate: typeof push;
}

@autobind
class ApplicationBar extends React.PureComponent<IProps, { anchorEl: HTMLInputElement | undefined }> {
  constructor(props: any) {
    super(props);
    this.state = { anchorEl: undefined };
  }
  public render() {

    const auth = true;
    const { classes } = this.props;
    const menuOpened = !!this.state.anchorEl;
    return (
      <div className={classes.root}>
        <AppBar position="fixed" color="primary">
          <Toolbar>
            <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="title" color="inherit" className={classes.flex}>
              Title
            </Typography>

            <Tabs value={this.getPathName()} onChange={this.handleNavigate} >
              {/* <Tabs value="/"> */}
              <Tab label="Counter 1" value="/counter1" />
              <Tab label="Counter 2" value="/counter2" />
              <Tab label="Register" value="/register" />
              <Tab label="Forecast" value="/forecast" />
            </Tabs>

            {auth && (
              <div>
                <IconButton
                  aria-owns={menuOpened ? 'menu-appbar' : undefined}
                  aria-haspopup="true"
                  onClick={this.handleMenu}
                  color="inherit"
                >
                  <AccountCircle />
                </IconButton>
                <Menu
                  id="menu-appbar"
                  anchorEl={this.state.anchorEl}
                  anchorOrigin={{
                    horizontal: 'right',
                    vertical: 'top',
                  }}
                  transformOrigin={{
                    horizontal: 'right',
                    vertical: 'top',
                  }}
                  open={menuOpened}
                  onClose={this.handleClose}
                >
                  <MenuItem onClick={this.handleClose}>Profile</MenuItem>
                  <MenuItem onClick={this.handleClose}>My account</MenuItem>
                </Menu>
              </div>
            )}
          </Toolbar>
        </AppBar>
      </div >
    );
  }
  private getPathName(): string {
    if (!this.props.location) {
      return "/counter1";
    }
    return (this.props.location as { pathname: string }).pathname;
  }
  private handleNavigate(event: React.ChangeEvent<{}>, value: any) {
    this.props.navigate(value as string);
  }

  private handleMenu(event: React.MouseEvent<HTMLInputElement>) {
    this.setState({ anchorEl: event.currentTarget });
  }

  private handleClose() {
    this.setState({ anchorEl: undefined });
  }
}
export default withStyles(styles)(ApplicationBar);

подведем итоги:

• Components: самый глупый элемент, который обычно должен иметь только метод рендеринга и какой-либо другой обработчик методов для пузырьков пользовательских событий. Этот метод заботится только о том, чтобы показать свои свойства пользователю. Не используйте состояние, если у вас нет визуальной информации, которая принадлежит только этому компоненту (например, видимость всплывающего окна). Все, что показано или обновлено, поступает сверху: компонент более высокого уровня или контейнер. Он не решает обновлять свои собственные значения. В лучшем случае он обрабатывает пользовательское событие в подкомпоненте, а затем всплывает другое событие выше и... ну, может быть, в какой-то момент некоторые новые свойства будут возвращены своим контейнером!
• контейнер: очень глупая логика, которая заключается в обертывании компонента верхнего уровня в redux для подключения событий к действиям и подключения некоторой части магазина к свойствам
• Redux thunk (или redux наблюдаемый): это тот, который обрабатывает всю логику пользовательского приложения. Этот парень единственный, кто знает, что и когда запускать. Если часть вашего переднего конца должна содержать сложность, это она!
• редукторы: определите, как организовать данные в хранилище, чтобы они были максимально удобными для использования.
• хранилище: в идеале один контейнер верхнего уровня, единственный, который содержит данные, которые должны быть показаны пользователю. Никто не должен.

Если вы будете следовать этим принципы, вы никогда не должны сталкиваться с такой проблемой, как "почему, черт возьми, это называется дважды? и... кто его сделал? и почему именно сейчас?"

что-то еще: если вы используете redux, используйте структуру неизменяемости. В противном случае вы можете столкнуться с проблемами, поскольку редукторы должны быть чистыми функциями. Для этого вы можете использовать популярный неизменными.js, но совсем не удобно. И покойный оузидер, который на самом деле убийца: Иммер (сделанный автором или mobx).