Why is there an error when using useMemo?

Question

React

There is this component:

import React from "react";

import styles from './styles/main.scss';

interface PaginationProps {
  itemsCount: number;
}

const Pagination: React.FC<PaginationProps> = (props) => {
  const { itemsCount } = props;

  const items = React.useMemo(() => {
    return [...Array(itemsCount).keys()].reverse();
  }, [itemsCount]);

  return (
    <ul className={styles['pagination']}>
      {items.map((itemNumber) => {
        if (!itemNumber) {
          return null;
        }

        return (
          <li
            className={styles['pagination__item']}
            key={itemNumber}
          >
            {itemNumber}
          </li>
        );
      })}
    </ul>
  );
};

Pagination.defaultProps = {
  itemsCount: 0,
};

export default Pagination;

When rendering, I get a standard error:

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

I tried to do the same in the online sandbox - everything works well. What can be wrong?

Answer 1

I forgot to point out that the problem occurred when using module federation. When I rummaged through the same version of react for all components, the problem disappeared, and other similar

Answer 2

Check all the places where you call Pagination.
Maybe somewhere you use Pagination () instead. <Pagination
Well, the error itself gives 5 percent of the necessary information, along with the error, you need a stack.