'onCallback for event handler [duplicate]

Given the input

<input
    ref={inputRef}
    className={styles.input}
    onBlur={handleDoneChange}
    type='text'
    value={newValue}
    onChange={handleChange}
    onKeyDown={handleKeyDown}
/>

I saw a piece of code that put some handler (handleChange, handleDoneChange) in useCallback, some not (handleKeyDown), as in the following:

const handleChange = useCallback((e) => {
    setNewValue(e.target.value);
}, []);

const handleDoneChange = useCallback(() => {
    changeName();
}, [newValue, router.query.id]);

const handleKeyDown = (e) => {
    if (e.key === 'Enter') {
        changeName();

        e.target.blur();
    }

};

Should I put handleKeyDown in useCallback, if not, what are the possible reasons?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source