In React, what’s the difference between onChange and onInput?

In React, what’s the difference between onChange and onInput?

When working with React, you may come across two event handlers, onChange and onInput. While they may seem similar, there are some key differences between the two.

The onChange event handler is triggered when the value of an input element changes. This means that the event will only fire when the user has finished making a change and moves focus away from the input field. It is commonly used with form elements like , </code>, and <code><select></code>.</p> <p>Here’s an example of how to use <code>onChange</code> in React:</p> <pre><code>{`import React, { useState } from 'react'; function MyComponent() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; return ( <input type="text" value={value} onChange={handleChange} /> ); }`}</code></pre> <p>The <code>onInput</code> event handler, on the other hand, is triggered whenever the value of an input element changes, regardless of whether the user has finished making a change or not. This means that the event will fire as the user types or makes any changes to the input field. It is commonly used when you need to track changes in real-time, such as for live search or character count.</p> <p>Here’s an example of how to use <code>onInput</code> in React:</p> <pre><code>{`import React, { useState } from 'react'; function MyComponent() { const [value, setValue] = useState(''); const handleInput = (event) => { setValue(event.target.value); }; return ( <input type="text" value={value} onInput={handleInput} /> ); }`}</code></pre> <p>It’s important to note that while <code>onChange</code> is triggered after the user finishes making a change, <code>onInput</code> is triggered as the user types or makes any changes. Depending on your use case, you may choose one over the other.</p> <p>So, to summarize:</p> <ul> <li><code>onChange</code> is triggered when the value of an input element changes and the user moves focus away from the input field.</li> <li><code>onInput</code> is triggered whenever the value of an input element changes, regardless of whether the user has finished making a change or not.</li> </ul> <p>Both event handlers can be useful in different scenarios, so choose the one that best suits your needs.</p> <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-2567" class="share-facebook sd-button share-icon" href="https://js-duck.com/in-react-whats-the-difference-between-onchange-and-oninput/?share=facebook" target="_blank" title="Click to share on Facebook" ><span>Facebook</span></a></li><li class="share-x"><a rel="nofollow noopener noreferrer" data-shared="sharing-x-2567" class="share-x sd-button share-icon" href="https://js-duck.com/in-react-whats-the-difference-between-onchange-and-oninput/?share=x" target="_blank" title="Click to share on X" ><span>X</span></a></li><li class="share-end"></li></ul></div></div></div><div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'> <!-- YARPP List --> <h3>Related Posts:</h3><ol> <li><a href="https://js-duck.com/react-js-identifying-different-inputs-with-one-onchange-handler/" rel="bookmark" title="React.js: Identifying different inputs with one onChange handler">React.js: Identifying different inputs with one onChange handler</a> <br/><small>React.js: Identifying different inputs with one onChange handler When working with forms in React.js, it is common to have multiple…</small></li> <li><a href="https://js-duck.com/react-js-onchange-event-for-contenteditable/" rel="bookmark" title="React.js: onChange event for contentEditable">React.js: onChange event for contentEditable</a> <br/><small>React.js: onChange event for contentEditable React.js is a powerful JavaScript library that allows developers to build user interfaces efficiently. One…</small></li> <li><a href="https://js-duck.com/typescript-input-onchange-event-target-value/" rel="bookmark" title="Typescript Input Onchange Event.target.value">Typescript Input Onchange Event.target.value</a> <br/><small>Typescript input onchange event.target.value When working with TypeScript and handling input events, it is common to want to access the…</small></li> <li><a href="https://js-duck.com/html-text-input-allow-only-numeric-input-2/" rel="bookmark" title="Html Text Input Allow Only Numeric Input">Html Text Input Allow Only Numeric Input</a> <br/><small>HTML Text Input: Allowing Only Numeric Input When working with HTML forms, you may come across situations where you want…</small></li> </ol> </div> </div> <div class="wp-block-template-part"> <div style="height:0" aria-hidden="true" class="wp-block-spacer"></div> <div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="margin-top:var(--wp--preset--spacing--70)"> <hr class="wp-block-separator alignwide has-css-opacity is-style-wide"/> <div class="wp-block-columns alignwide has-small-font-size is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex" style="margin-top:var(--wp--preset--spacing--30)"> <div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-1 wp-block-column-is-layout-flow"> <div class="wp-block-group is-layout-flex wp-container-core-group-is-layout-4 wp-block-group-is-layout-flex"> <p> Posted </p> <div class="wp-block-post-date"><time datetime="2023-09-09T00:00:00+00:00">September 9, 2023</time></div> <p> in </p> <div class="taxonomy-category wp-block-post-terms"><a href="https://js-duck.com/category/react/" rel="tag">React</a></div> </div> <div class="wp-block-group is-layout-flex wp-container-core-group-is-layout-5 wp-block-group-is-layout-flex"> <p> by </p> <div class="wp-block-post-author"><div class="wp-block-post-author__content"><p class="wp-block-post-author__name">J. Kolby</p></div></div> </div> </div> <div class="wp-block-column is-layout-flow wp-container-core-column-is-layout-2 wp-block-column-is-layout-flow"> <div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-6 wp-block-group-is-layout-flex"> <p> Tags: </p> <div class="taxonomy-post_tag wp-block-post-terms"><a href="https://js-duck.com/tag/react/" rel="tag">React</a></div> </div> </div> </div> </div> </div> <section class="wp-block-template-part"> <div class="wp-block-group has-global-padding is-layout-constrained wp-container-core-group-is-layout-8 wp-block-group-is-layout-constrained" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"> <div class="wp-block-comments"> <h2 class="wp-block-heading">Comments</h2> <div id="respond" class="comment-respond wp-block-post-comments-form"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/in-react-whats-the-difference-between-onchange-and-oninput/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://js-duck.com/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Name *

Email * Website Save my name, email, and website in this browser for the next time I comment.
JS Duck Privacy Policy © Copyright 2023 window.WPCOM_sharing_counts = {"https:\/\/js-duck.com\/in-react-whats-the-difference-between-onchange-and-oninput\/":2567}; var ce4wp_form_submit_data = {"siteUrl":"https:\/\/js-duck.com","url":"https:\/\/js-duck.com\/wp-admin\/admin-ajax.php","nonce":"c3e7915e22","listNonce":"99f7181a01","activatedNonce":"f021855208"}; ( function() { var skipLinkTarget = document.querySelector( 'main' ), sibling, skipLinkTargetID, skipLink; // Early exit if a skip-link target can't be located. if ( ! skipLinkTarget ) { return; } /* * Get the site wrapper. * The skip-link will be injected in the beginning of it. */ sibling = document.querySelector( '.wp-site-blocks' ); // Early exit if the root element was not found. if ( ! sibling ) { return; } // Get the skip-link target's ID, and generate one if it doesn't exist. skipLinkTargetID = skipLinkTarget.id; if ( ! skipLinkTargetID ) { skipLinkTargetID = 'wp--skip-link--target'; skipLinkTarget.id = skipLinkTargetID; } // Create the skip link. skipLink = document.createElement( 'a' ); skipLink.classList.add( 'skip-link', 'screen-reader-text' ); skipLink.href = '#' + skipLinkTargetID; skipLink.innerHTML = 'Skip to content'; // Inject the skip link. sibling.parentElement.insertBefore( skipLink, sibling ); }() ); var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"Copy code to clipboard"}; _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"223076394\",\"post\":\"2567\",\"tz\":\"0\",\"srv\":\"js-duck.com\",\"j\":\"1:14.5\"}") ]); _stq.push([ "clickTrackerInit", "223076394", "2567" ]); wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}}; var dracula = {"homeUrl":"https:\/\/js-duck.com","ajaxUrl":"https:\/\/js-duck.com\/wp-admin\/admin-ajax.php","pluginUrl":"https:\/\/js-duck.com\/wp-content\/plugins\/dracula-dark-mode","settings":{"excludes":[""],"colorMode":"presets","preset":"dracula"},"isPro":"","upgradeUrl":"https:\/\/js-duck.com\/wp-admin\/admin.php?billing_cycle=annual&page=dracula-pricing","nonce":"549a68cfe9"}; var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"}; var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-facebook' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' ); return false; } } ); } )(); var windowOpen; ( function () { function matches( el, sel ) { return !! ( el.matches && el.matches( sel ) || el.msMatchesSelector && el.msMatchesSelector( sel ) ); } document.body.addEventListener( 'click', function ( event ) { if ( ! event.target ) { return; } var el; if ( matches( event.target, 'a.share-x' ) ) { el = event.target; } else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-x' ) ) { el = event.target.parentNode; } if ( el ) { event.preventDefault(); // If there's another sharing window open, close it. if ( typeof windowOpen !== 'undefined' ) { windowOpen.close(); } windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomx', 'menubar=1,resizable=1,width=600,height=350' ); return false; } } ); } )();