El hook useCallback y React.memo

Descubre lo bien que trabajan juntos este hooks y la utilidad React.memo para memorizar componentes

El hook useCallback

import {useCallback} from 'react';function Component() {

// ....
const onClick = useCallback(() => console.log('Click'); []);
return (<div>
<MyButton onClick={onClick}>Púlsame</MyButton>
...
);
}
import {useCallback, useState} from 'react';

export default function useCount(initialValue = 0) {
const [count, setCount] = useState(initialValue);

const increment = useCallback(function() {
setCount(count => count + 1);
}, [setCount]);


return [count, increment];
}
useEffect(function() {
// something
console.log(otherDep);
increment();
}, [increment, otherDep]);

React.memo

import React from 'react';function Footer({user}) {
return (...);
}
export default React.memo(Footer);

Combinando useCallback y React.memo

// 1️⃣ MyButton.jsfunction MyButton({onClick}) {
return <button onClick={onClick}>Pulsar</button>
}
export default React.memo(MyButton);// 2️⃣ Component.jsfunction Component() {

// ....
function onClick() {
...
}
return (<div>
<MyButton onClick={onClick}>Púlsame</MyButton>
...
);
}
function createFn() {
return function foo() { console.log('Hola'); }
}
const fn1 = createFn();
const fn2 = createFn();
console.log(fn1 === fn2); // false
// 1️⃣ MyButton.jsfunction MyButton({onClick}) {
return <button onClick={onClick}>Pulsar</button>
}
export default React.memo(MyButton);// 2️⃣ Component.jsfunction Component() {

// ....
const onClick = useCallback(() => console.log('Click'); []);
return (<div>
<MyButton onClick={onClick}>Púlsame</MyButton>
...
);
}

Ejemplo

Conclusiones

¿Quieres recibir más artículos como este?

Entre paseo y paseo con Simba desarrollo en Symfony y React

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