Shot code
Published in

Shot code

Introduction to useRef Hook

Photo by David Marcu on Unsplash

1. What is useRef Hook?

import {createRef} from 'react' 

const FocusInput = () => {
const inputEl = createRef()

const focusInput = () => {
inputEl.current.focus()
}

return (
<>
<input ref={inputEl} type="text" />
<button onClick={focusInput}>Focus input</button>
</div>
)
}
const FocusInput = () => {
const inputEl = React.useRef()

const focusInput = () => {
inputEl.current.focus()
}

return (
<>
<input ref={inputEl} type="text" />
<button onClick={focusInput}>Focus input</button>
</>
)
}
const Test = () => {
const [renderIndex, setRenderIndex] = React.useState(1)
const refFromUseRef = React.useRef()
const refFromCreateRef = createRef()

if (!refFromUseRef.current) {
refFromUseRef.current = renderIndex
}

if (!refFromCreateRef.current) {
refFromCreateRef.current = renderIndex
}

return (
<>
<p>Current render index: {renderIndex}</p>
<p>
<b>refFromUseRef</b> value: {refFromUseRef.current}
</p>
<p>
<b>refFromCreateRef</b> value:{refFromCreateRef.current}
</p>

<button onClick={() => setRenderIndex(prev => prev + 1)}>
Cause re-render
</button>
</>
)
}

2. Beyond the Ref attribute

const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 40})

React.useEffect(() => {
console.log('You need to do exercise!')
}, [user])

const gainWeight = () => {
const newWeight = Math.random() >= 0.5 ? user.weight : user.weight + 1
setUser(user => ({...user, weight: newWeight}))
}

return (
<>
<p>Current weight: {user.weight}</p>
<button onClick={gainWeight}>Eat burger</button>
</>
)
}

export default Profile
const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 40})

React.useEffect(() => {
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})

...
}

export default Profile
const Profile = () => {
const [user, setUser] = React.useState({name: 'Alex', weight: 20})

React.useEffect(() => {
const previousUser = previousUserRef.current
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})

const previousUserRef = React.useRef()
React.useEffect(() => {
previousUserRef.current = user
})

...
}

export default Profile
const usePrevious = (value) => {
const previousUserRef = React.useRef()
React.useEffect(() => {
previousUserRef.current = value
}, [value])

return previousUserRef.current
}
const usePrevious = (value) => {
const ref = React.useRef()

React.useEffect(() => {
ref.current = value
}, [value])

return ref.current
}
const Profile = () => {
const initialValue = {name: 'Alex', weight: 20}
const [user, setUser] = React.useState(initialValue)

const previousUser = usePrevious(user)

React.useEffect(() => {
if (!_.isEqual(previousUser, user) {
console.log('You need to do exercise!')
}
})

const gainWeight = () => {
const newWeight = Math.random() >= 0.5 ? user.weight : user.weight + 1
setUser(user => ({...user, weight: newWeight}))
}

return (
<>
<p>Current weight: {user.weight}</p>
<button onClick={gainWeight}>Eat burger</button>
</>
)
}

export default Profile

3. Conclusion:

✍️ Written by

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store