useNumberField example code is broken; increment/decrement unresponsive

[josephmarkus]

🐛 Bug Report

useNumberField contains example code, which does not work. Clicking increment/decrement button multiple times may or may not register a single value change.

🤔 Expected Behavior

Each click should result in increment/decrement of value

😯 Current Behavior

Example code in Codesandbox: https://codesandbox.io/s/usenumberfield-bug-mrjwbi

Btw, in production builds (or Storybook) this works perfectly

💁 Possible Solution

Not sure

🔦 Context

Was trying to fill in a form using the component from our own Storybook where component behaves ok. Noticed it was unresponsive. After a bunch of debugging noticed that in Storybook the component works fine, as well as in the app, but only in production build.

💻 Code Sample

https://codesandbox.io/s/usenumberfield-bug-mrjwbi

// Button.js
import { useRef } from "react";
import { useButton } from "react-aria";

export const Button = (props) => {
  let ref = useRef(null);
  let { buttonProps } = useButton(props, ref);
  return (
    <button {...buttonProps} ref={ref}>
      {props.children}
    </button>
  );
};

// NumberField.js
import React from "react";
import { useNumberFieldState } from "react-stately";
import { useLocale, useNumberField } from "react-aria";
import { Button } from "./Button";

export const NumberField = (props) => {
  let { locale } = useLocale();
  let state = useNumberFieldState({ ...props, locale });
  let inputRef = React.useRef(null);
  let {
    labelProps,
    groupProps,
    inputProps,
    incrementButtonProps,
    decrementButtonProps
  } = useNumberField(props, state, inputRef);

  return (
    <div>
      <label {...labelProps}>{props.label}</label>
      <div {...groupProps}>
        <Button {...decrementButtonProps}>-</Button>
        <input {...inputProps} ref={inputRef} />
        <Button {...incrementButtonProps}>+</Button>
      </div>
    </div>
  );
};

// App.js
import { NumberField } from "./NumberField";

export default function App() {
  return (
    <NumberField
      label="Price"
      defaultValue={6}
      formatOptions={{
        style: "currency",
        currency: "USD"
      }}
    />
  );
}

🌍 Your Environment

Software	Version(s)
react-stately	3.21.0
react-aria	3.23.1
Browser	Chrome 111.0.5563.146
Operating System	MacOS 13.3

🧢 Your Company/Team

n/a

🕷 Tracking Issue (optional)

n/a

[devongovett]

Probably react strict mode. Support for that is still a work in progress

[josephmarkus]

Thanks @devongovett . I've just tried to disable StrictMode and it works without it as expected:

// import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  // <StrictMode>
    <App />
  // </StrictMode>
);

[snowystinger]

Thanks for checking, closing as a duplicate of #3088
and umbrella strict mode issue here: #779