Saltar al contenido

¿Cómo uso Reaccionar useCallback gancho con examplesSep, 15thIn este tutorial, vamos a aprender acerca de cómo reaccionan uso gancho …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo reaccionan uso gancho y ventajas de usar el gancho useCallback con ejemplos useCallback.

useCallback () gancho

El useCallback () gancho nos ayuda a memoize las funciones de forma que impide la re-creación de funciones en cada volver a hacer.

La función pasamos al gancho useCallback sólo es re-crea cuando una de sus dependencias se cambian.

Veamos un ejemplo:

import React, {useState} from "react";
import ReactDOM from "react-dom";

function Button(props) {
return ;}

function App() {
const [count, setCount] = useState(0);
const [isActive, setActive] = useState(false);

const handleCount = () => setCount(count + 1); const handleShow = () => setActive(!isActive);
return (

{isActive && (

{count}

)}

);
}

ReactDOM.render(, document.getElementById("root"));

En el código anterior, hay dos funciones que son (HandleCount, handleShow) y el problema es cada vez si hacemos clic en cualquier botón de la interfaz de usuario se actualiza y dos funciones se vuelven a crear de nuevo.

Para resolver este problema necesitamos para envolver nuestras funciones con useCallback gancho.

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

function Button(props) {
return ;
}

function App() {
const [count, setCount] = useState(0);
const [isActive, setActive] = useState(false);

const handleCount = useCallback(() => setCount(count + 1), [count]); const handleShow = useCallback(() => setActive(!isActive), [isActive]);
return (

{isActive && (

{count}

)}

);
}

ReactDOM.render(, document.getElementById("root"));

Aquí envuelto nuestros dos funciones con useCallback gancho y segundo argumento es una dependencia, por lo que sólo se vuelven a crear thatfunctions si se cambia uno de su valor dependencia.

Ahora, si hacemos clic en el botón de Incremento valor de conteo se cambia y la función HandleCount se vuelve a crear.