Why does render lag so much on a simple task?

Question

React

I decided to make a project for honing skills, more than TODO.
1) I have 100 products in the database
2) There is a container for products, some kind of index layout, I called it , i.e. almost the root element of the project, it contains a header and everything else, maybe this is a serious cant of architecture, in it I do CONNECT to redux which calls the API, I also have it, it is also a layout
3) There is a react class component
4) I get these 100 products in the container and render through the map 100 times.
Long something very , it's a given I do it all on my computer.
React gives me a message:
[Violation] 'click' handler took 278ms
[Violation] 'readystatechange' handler took 250ms
Questions:
1) How can I increase the rendering speed? maybe there is some approach for gradual rendering?
Still, I think that I'm doing something wrong, something is very sad that 100 products take so long to render out of the box :(
Now I'll try to make react function components on , but it's unlikely that the problem will become faster.
2) This is a very serious jamb if i do. Connect to ? in order to render the goods inside
3) Each category loads a group of goods for me, but how to cache them? in fact, I can just create a new branch in the store, where I will store all the goods and will that be enough? those. if there is a branch, then it pulls from there, if there is no branch, then we call the 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);

Answer 1

As an option