Не могу понять, почему по клику компонент рендерится два раза?

Question

[lexstile]

Есть меню, у него есть айтемы, на них навешен обработчик.
По клику на item он рендерится, если еще раз по нему (этому же item) кликнуть, он снова рендерится (не рендерится только после 2 клика на один и тот же элемент), этого быть недолжно. Как можно поправить?

App.jsx

spoiler

const AppComponent = () => {
  const [activePage, setActivePage] = useState('home');

  const handleClickMenuItem = useCallback((page) => () => setActivePage(page), []);

  console.log('activePage', activePage);
  return (
    <>
      <Header />
      <Footer activePage={activePage} onClick={handleClickMenuItem} />
    </>
  );
};

export const App = memo(AppComponent);

Footer.jsx

spoiler

const withIcon = (Icon, color) => <Icon fill={color} width={28} height={28} />;

const FooterComponent = ({ activePage, onClick }) => (
  <div className={cx('footer')}>
    {menuItems.map(({ alias, icon }) => (
      <div key={alias} className={cx('nav-item')} onClick={onClick(alias)}>
        {withIcon(icon, alias === activePage ? '#3f8ae0' : '#99a2ad')}
      </div>
    ))}
  </div>
);

export const Footer = memo(FooterComponent);

Answer 1

[Aves]

https://reactjs.org/docs/strict-mode.html#detectin...
Поправлюсь, в dev режиме весь Functional component вызывается дважды.

Answer 2

[Mikhail Osher]

// take this
onClick={onClick(alias)}>
// change to this
onClick={() => onClick(alias)}>

Comments

[lexstile]

Эм, не совсем понимаю, чем не понравился мой вариант?
Проверил - все те же 2 рендера. Не рендерит только по 3-му клику на один и тот же элемент.

[Mikhail Osher]

lexstile, Читайте документацию https://reactjs.org/docs/handling-events.html

[lexstile]

Mikhail Osher, читал - ничего необычного не заметил.

[Mikhail Osher]

lexstile, запись

<div key={alias} className={cx('nav-item')} onClick={onClick(alias)}>

моментально вызывает функцию onClick, вместо того, чтобы повесить обработчик события..

[lexstile]

Mikhail Osher, так если мы оставим анонимную - он тоже ее вызовет в таких же условиях