ReactJS - run useEffect on Blur only if the input field is updated

user_938133 0
Viewed 1982

The task is to send analytics data only if the input is updated and blurred. Natively, this can be achieved by using the onchange event which only fires the event if the input is updated and loses focus.

React works differently such that onChange fires on every change to the input. Does React provide any out of the box solution for this?

The code is pretty simple:

const App = () => {
    const [ name, setName ] = useState( '' );

    useEffect( () => {
        /**
         * Run this function only on Update + Blur.
         * This will contain the logic to send analytics.
         */
    } );

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } />
    );
};
reactjs javascript
2 Answers

Ok, I think this should satisfy your needs. What you want to do is keep a transient record of their input before they started typing, then update it when they blur if and only if that input value has changed. You can do this with a ref, so something like this:

const App = () => {
    const transientName = useRef('');
    const [ name, setName ] = useState( '' );

    const handleBlur = () => {
        // This will only trigger if they blur AND the name has changed
        if (transientName.current !== name) {
            // Update the transient name value
            transientName.current = name;

            // Do other on blur analytics stuff
        }
    };

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } onBlur={handleBlur} />
    );
};

This way, if they change the input and blur, it will fire, but if they blur the input without having changed the input value, it shouldn't fire your custom on blur code inside the if condition

user_54968080

This is similar to componentDidUpdate

function YourComponent({ someProp }) {
useEffect(() => {
// code to run when someProp changes
}, [someProp]);
}

Which means it would update anytime your specified prop or state is changed, in your case I would do something like this:

const App = () => {
    const [ name, setName ] = useState( '' );

    useEffect( () => {
        /**
         * Run this function only on Update + Blur.
         * This will contain the logic to send analytics.
         */
    }, [name] );

    return (
        <input type="text" value={ name } onChange={ ( e ) => setName( e.target.value ) } />
    );
};

This would trigger your specified function whenever your name value is updated.

user_73100340
Related