menu-button: onSelect fires twice when code is wrapped in StrictMode

[coreylight]

🐛 Bug report

Current Behavior

• Use reach Menu, MenuList, and MenuItem as prescribed
• Use within an app that includes the React StrictMode component
• When selecting a menu item (usually the second menu item (??)), onSelect fires twice

Expected behavior

• Menu item should only fire onSelect once

Reproducible example

https://codesandbox.io/s/pedantic-varahamihira-i5e0f

• This only seems to happen when wrapping in StrictMode
• This only seems to happen with non-production builds.

Suggested solution(s)

??

Your environment

Software	Name(s)	Version
Reach Package	menu-button	0.7.3
React		16.12.0
Browser		https://whatsmybrowser.org/b/GHMENEL

[chaance]

At first glance I ... have no idea what is going on here!

[elrypto]

React strict mode will double invoke certain lifecycle methods, it is a feature to help figure out issues in an application. Those methods are constructor, render, setState, getDerivedStateFromProps. https://reactjs.org/docs/strict-mode.html.

[Cryrivers]

I think the root cause is the side effect in menu reducer. The reducer calls callbacks (i.e. onSelect). However in Concurrent React, we cannot guarantee internal React hooks (esp. useState, useReducer) to run only once.