Почему так сильно лагает render на простой задаче?

Question

webe @webe

frontend

React

Почему так сильно лагает render на простой задаче?

Решил сделать проект для оттачинвания навыков , побольше чем TODO.
1) У меня есть 100 товаров в БД
2) Есть контейнер для товаров , некий index layout, я называл его , т.е. почти корневой элемент проекта в нем лежит шапка и все остальное, возможно это серьезный косяк архитектуры, в нем я делаю CONNECT к redux который вызывает API, так же у меня есть , тоже является layout'ом
3) Есть react class component
4) Я получаю эти 100 товаров в контейнере и рендерю через map 100 раз.

Долго что-то очень , это с учетом я делаю все это на своем компе.
Реакт мне дает сообщение :
[Violation] 'click' handler took 278ms
[Violation] 'readystatechange' handler took 250ms

Вопросы:
1) Как можно увеличить скорость рендринга? может есть какой-то подход для постепенного рендринга?
Все же я думаю что я делаю что-то не так, что-то очнеь печально что 100 товаров так долго рендерится из коробки :(
Сейчас попробую сделать react function components на , но вряд в этом проблема быстрей станет.
2) Это очень серьезный косяк если я делаю. Connect в ? для того что бы отрендерить товары внутрь
3) У меня каждая категория грузит группу товаров, но как их закешировать? по сути я могу просто создавать новую ветку в стор, куда буду складывтаь все товары и этого будет достаточно? т.е. если ветка есть то тянет от туда, если ветки нет, товызываем API

class Main extends Component {
  state = {};

  componentDidMount() {
    this.props.getProductsAll();
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        <Wrapper>
          <SideBar />
          <Content>
            {this.props.products.map(el => (
              <Product key={el.id} data={el} />
            ))}
          </Content>
        </Wrapper>

        <Footer>Footer</Footer>
      </React.Fragment>
    );
  }
}

function mapStateToProps(state) {
  return { products: state.products };

export default connect(mapStateToProps, { getProductsAll })(Main);