function App() {

  const usernameInput = React.useRef(null);

  const emailInput = React.useRef(null);

  React.useEffect(() => {

    // focus username on mount, when rendering is finished

    usernameInput.current.focus()

  }, [])

  const handleFocusEmail = () => {

    emailInput.current.focus()

  }

  // we don't have the .current property in the rendering phase

  console.log(usernameInput.current);

​

  return (

    <div>

      <input type="text"

        placeholder="Username"

        ref={usernameInput}

      />

      <input type="text"

        placeholder="E-mail"

        ref={emailInput}

      />

      <button onClick={handleFocusEmail}>

        Focus e-mail

      </button>

    </div>

  )

}