scrimba
Learn React Hooks in one hour
Custom Hooks
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

AboutCommentsNotes
Custom Hooks
Expand for more info
Playground.js
run
preview
console
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import randomColor from 'randomcolor'

export default function Playground() {
const [count, setCount] = useState(30)

const inputRef = useRef()

const [color, setColor] = useState(randomColor())
useEffect(() => inputRef.current.focus(), [count])

const cb = useCallback(num => console.log(num), [count])

return (
<div style={{ borderTop: `10px solid ${color}`}}>
{count}
<button onClick={() => setCount(currentCount => currentCount - 1)}>-</button>
<button onClick={() => setCount(currentCount => currentCount + 1)}>+</button>
<button onClick={() => setColor(randomColor())}>Change Color</button>
<hr />
<input ref={inputRef} type="range" onChange={e => setCount(e.target.value)} value={count} />
<Calculate cb={cb} num={count} />
</div>
)
}

const Calculate = React.memo(({ cb, num }) => {
cb(num)
const renderCount = useRef(1)
return <div>{renderCount.current++}</div>
})
Console
"rendered"
,
index.html
-5:39