React Hooks Memorize Cost - reactjs

Question

Does React.useMemo() have the cost to compare, like shouldComponentUpdate() in React.PureComponent ?
Is it bad to put variables changed often into useMemo() or useCallback()'s deps.
Thanks

Answer 1

Here is a µ-benchmark, React.memo() seems to be the fastest, with PureComponent in the middle and useCallback() consistently the slowest:
class P extends React.PureComponent {
render() {
return <span onClick={() => this.props.n} />
}
}
function C(props) {
const c = React.useCallback(() => props.n, [props.n])
return <span onClick={c} />
}
const M = React.memo(props => <span onClick={() => props.n} />)
const target = document.getElementById('target')
function test(o) {
console.log('From fastest to slowest:')
const entries = Object.entries(o)
const results = new Map(entries.map(([name]) => [name, 0]))
for (let i = 0; i < 1e3; i++) {
for (let [name, X] of entries) {
const start = performance.now()
for (let j = 0; j < 1e2; j++) {
ReactDOM.render(<X n={i} />, target)
}
const took = performance.now() - start
results.set(name, results.get(name) + took)
}
}
const sorted = Array.from(results).sort(([, a], [, b]) => a-b)
for (let [name, t] of sorted) {
console.log(name, t)
}
}
test({PureComponent: P, useCallback: C, memo: M})
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="target" hidden></div>