Почему возникает ошибка при использовании useMemo?

Question

[AHMED_RAPIRA]

Имеется такой компонент:

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;

При рендере получаю стандартную ошибку:

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:

Попробовал тоже самое сделать в онлайн песочнице - все работает хорошо. В чем может быть дело?

Answer 1

[AHMED_RAPIRA]

Забыл указать, что проблема возникала при использовании module federation. Когда у всех компонентов я пошарил одну и ту же версию реакта, проблема исчезла, и другие подобные

Answer 2

[Владимир]

Проверь все места где ты вызываешь Pagination
Возможно где то используешь Pagination() вместо <Pagination
Ну и сама ошибка дает процентов 5 необходимой информации, вместе с ошибкой нужен стек.

Comments

[AHMED_RAPIRA]

спасибо за отклик ) я вызываю его как jsx-компонент, если убираю useMemo то все становится ок. попробую обернуть в ErrorBoundary, мб что всплывет..

[Владимир]

AHMED_RAPIRA, Да тебе и девелопер тулз по идее достаточно информации должны показать

[AHMED_RAPIRA]

Владимир, ну там ровно такая же ошибка, как я указал ) ничего подробного, просто ошибка с ссылкой на подробности сюда:
https://reactjs.org/warnings/invalid-hook-call-war...