scrimba
Reusable React
Components & refs
Updating Refs with Side Effects
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Updating Refs with Side Effects
AboutCommentsNotes
Updating Refs with Side Effects
Expand for more info
index.js
run
preview
console
import React, { useState, useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const App = () => {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
let focusRef = useRef(null)

return (
<section>
<h2>Email Signup</h2>
<input type="text" value={name} placeholder="Name" onChange={(e) => {
setName(e.target.value)
if (name.length >= 10) {
focusRef.current.focus()
}
}} />
<input type="text" value={email} ref={focusRef} placeholder="Email" onChange={(e) => {
setEmail(e.target.value)
}} />
</section>
)
}

ReactDOM.render(<App />, document.getElementById('root'));
Console
/index.html?
-7:14