React and autofocus

By  on  

While I love ReactJS, I can say that I sometimes find interactions that were easy during the pre-ReactJS are annoyingly difficult or at least "indirect".  One example is properly ensuring that a given <input> element gets focused when a button in a different component is clicked; in the old days, it was three lines of code, but with React it can be more.

Let's have a look at a few strategies for properly focusing on <input> elements with ReactJS.


The autofocus attribute is honored in ReactJS but only when the <input> element is re-rendered with React:

<input type="text" autofocus="true" />

autofocus is easy to use but only works when the <input> is initially rendered; since React intelligently only re-renders elements that have changed, the autofocus attribute isn't reliable in all cases.

componentDidUpdate with ref

Since we can't rely solely on the autofocus attribute, we can use componentDidUpdate to complete the focus:

class Expressions extends Component {

  _input: ?HTMLInputElement;

  // ....

  componentDidUpdate(prevProps, prevState) {

  render() {
      return (
        <div className={this.state.focused ? "focused": ""}>
              ref={c => (this._input = c)}

componentDidUpdate fires after the component is updated, so any change to the parent component would trigger this method and your <input> would receive focus.  In my cases, I usually toggle a className on the parent element to signal the element is active and thus the componentDidUpdate will trigger.

My perspective of inter-widget interaction has been formed by the days of Dojo's dijit UI framework where each widget usually had a reference to every child widget; with ReactJS the practice is (hopefully) avoiding refs and using state, which is logical but there's still that piece of me that longs for a simple reference, which is why the second strategy makes sense to me.

Recent Features

Incredible Demos

  • By
    Fading Links Using jQuery:  dwFadingLinks

    UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works. Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.

  • By
    Do / Undo Functionality with MooTools

    We all know that do/undo functionality is a God send for word processing apps. I've used those terms so often that I think of JavaScript actions in terms of "do" an "undo." I've put together a proof of concept Do/Undo class with MooTools. The MooTools...


  1. Hi David.

    Great article — as always. It is just worth to update a syntax of reference to the now one (updated in 16.3) using




Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!