How to make onChange only fire once value is changed in React

Question

I'm using a range input in my React application. I would like to log the value selected once the range slider has changed (not while it is changing). Here is an example of my issue:

const App = () => {
  const handleChange = (e) => {
    console.log(e.target.valueAsNumber);
  }
  return <input type="range" onChange={handleChange}/>
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>

If you view the browser console, the value is being logged as you slide the range slider. My desired output is so that the handleChange callback is only fired once you release the slider. I would like it to behave in a similar way that onChange behaves in vanilla HTML:

const handleChange = (e) => {
  console.log(e.target.valueAsNumber);
}

<input type="range" onChange="handleChange(event)"/>

It seems like react has made onChange behave like onInput, which in my case is undesirable. Is there a simple prop that I'm missing to make this work? Or do I need to use refs or some other method to make this work as intentded?

@SamridhTuladhar - Thanks, `onMouseUp` could work, and I might try going with that. However it would have issues if users use `tab` to select the range input and then use the arrow keys `<` and `>` to change the slider. — Shnick, Oct 03 '21 at 04:23
Set onChange from ref like this: https://stackoverflow.com/a/62383569/11218031 — Avinash Thakur, Oct 03 '21 at 04:32
@SamridhTuladhar looks like onFocusOut doesn't work in React. But maybe a combination of `onMouseUp` and `onBlur` could also work. — Shnick, Oct 03 '21 at 04:33
yeah, you could make both `onMouseUp` and `onBlur` trigger the same functions — tsamridh86, Oct 03 '21 at 04:34
@AvinashThakur thanks - I'll take a look at that. I was hoping that there would be a standard inbuilt prop to retain the standard vanilla behaviour of onChange, but looks like there isnt. — Shnick, Oct 03 '21 at 04:35

score 4 · Accepted Answer · edited Jun 03 '23 at 17:07

The behaviour you want is of onchange event listener. Unfortunately, React connects onChange prop to oninput event handler.

There's also an active issue about this: https://github.com/facebook/react/issues/3964 Document how React's onChange relates to onInput #3964

Simple fix would be to use onchange event listener using ref.

const NewInput = (props) => {
  const setRef = useCallback((el) => {
    el.onchange = props.onChange || null;
  }, [props.onChange]);
  return <input ref={setRef} {...props} />
}

Another approach is discussed here: In React, what's the difference between onChange and onInput?

How to make onChange only fire once value is changed in React

1 Answers1