Si eres nuevo en React, es posible que te preguntes qué son los React Hooks y cuándo deberías usarlos. React solo introdujo ganchos en su versión 16.8, pero se han convertido rápidamente en una característica esencial de la biblioteca.
Aprenda todo sobre los conceptos básicos de React Hooks y descubra algunas de las mejores prácticas para usarlos en sus aplicaciones React.
¿Qué son los ganchos de reacción?
React Hooks te permite usar el estado y otras características de React sin escribir código adicional. Los ganchos son una excelente manera de hacer que su código sea más legible y fácil de mantener.
Hay algunos Hooks diferentes en React, pero los más utilizados son useState y useEffect. El gancho useState le permite agregar estado a sus componentes. Esto es útil para cosas como realizar un seguimiento de la entrada de un usuario o cambios en un formulario. El gancho useEffect le permite ejecutar una función cada vez que se procesa un componente. Esto es útil para cosas como obtener datos de una API o configurar una suscripción.
¿Cuándo debería usar ganchos de reacción?
Debe usar React Hooks siempre que necesite agregar funcionalidad adicional a un componente. Por ejemplo, si necesita realizar un seguimiento de la entrada de un usuario, usaría el enlace useState. Si necesita obtener datos de una API, usaría el gancho useEffect. Tú también puedes crear ganchos personalizados para llamadas API.
Si acaba de comenzar a usar React, es posible que aún no necesite usar Hooks. Pero a medida que crea aplicaciones más complejas, descubrirá que los ganchos son una excelente manera de agregar funcionalidad adicional a sus componentes.
Mejores prácticas con ganchos de reacción
Ahora que sabe qué son los React Hooks y cuándo usarlos, hablemos de algunas de las mejores prácticas.
1. Solo ganchos de llamada desde funciones de reacción
Solo debe llamar a React Hooks desde las funciones de React. Si intenta llamar a ganchos de reacción desde un componente de clase, obtendrá un error.
Esto se debe a que solo puede llamar a un React Hook desde una función React. Las funciones de reacción son componentes que declaras con una palabra clave de función.
Aquí hay un ejemplo de un componente de función React:
importar Reaccionar, { estado de uso } de 'reaccionar';funciónaplicación() {
constante [contar, establecerCuenta] = usarEstado(0);
devolver (
<división>
<pag>{contar}</pag>
<botón onClick={() => setCuenta (cuenta + 1)}>
Haz click en mi
</button>
</div>
);
}
Y aquí hay un ejemplo de un componente de clase:
importar Reaccionar, {Componente} de 'reaccionar';claseaplicaciónextiendeComponente{
estado = {
cuenta: 0
};
prestar() {
devolver (
<división>
<pag>{este.estado.cuenta}</pag>
<botón onClick={() => this.setState({ cuenta: this.state.count + 1 })}>
Haz click en mi
</button>
</div>
);
}
}
El primer ejemplo declara el componente App usando la palabra clave function, mientras que el segundo usa la palabra clave class.
2. Usar solo un gancho de efecto de uso
Si usa el gancho useEffect, solo debe usar uno por componente. Esto se debe a que useEffect se ejecuta cada vez que se procesa un componente.
Si tiene varios ganchos useEffect, todos se ejecutarán cada vez que se represente un componente. Esto puede conducir a un comportamiento inesperado y problemas de rendimiento. En el siguiente ejemplo, ambos useEffects se ejecutarán cada vez que se represente el componente de la aplicación.
importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';funciónaplicación() {
constante [contar, establecerCuenta] = usarEstado(0);usarEfecto(() => {
consola.log('¡Esto se ejecutará cada vez que se muestre el componente de la aplicación!');
}, []);usarEfecto(() => {
consola.log('¡Esto también se ejecutará cada vez que se renderice el componente de la aplicación!');
}, []);
devolver (
<división>
<pag>{contar}</pag>
<botón onClick={() => setCuenta (cuenta + 1)}>
Haz click en mi
</button>
</div>
);
}
En lugar de usar múltiples ganchos useEffect, puede usar un solo gancho useEffect y poner todo su código dentro de él. En el siguiente ejemplo, solo se ejecutará un enlace useEffect cada vez que se represente el componente de la aplicación.
importar Reaccionar, { estado de uso, efecto de uso } de 'reaccionar';funciónaplicación() {
constante [contar, establecerCuenta] = usarEstado(0);usarEfecto(() => {
consola.log('¡Esto se ejecutará cada vez que se muestre el componente de la aplicación!');
consola.log('¡Esto también se ejecutará cada vez que se renderice el componente de la aplicación!');
}, []);
devolver (
<división>
<pag>{contar}</pag>
<botón onClick={() => setCuenta (cuenta + 1)}>
Haz click en mi
</button>
</div>
);
}
Esto significa que solo puede llamar a React Hooks desde el primer ejemplo. Si intenta llamar a React Hooks desde el segundo ejemplo, obtendrá un error.
3. Use ganchos en el nivel superior
Una de las mejores prácticas con React Hooks es usarlos en el nivel superior. Debe evitar el uso de ganchos dentro de bucles, condiciones o funciones anidadas. Por ejemplo, si usa State dentro de un bucle for, cada vez que se ejecuta el bucle, React creará una nueva variable de estado. Esto puede conducir a un comportamiento inesperado.
importar Reaccionar, { estado de uso } de 'reaccionar';funciónaplicación() {
para (dejar yo = 0; yo < 10; i++) {
// ¡No hagas esto!
constante [contar, establecerCuenta] = usarEstado(0);
}
devolver (
<división>
<pag>{contar}</pag>
<botón onClick={() => setCuenta (cuenta + 1)}>
Haz click en mi
</button>
</div>
);
}
En el ejemplo anterior, el componente de la aplicación solo generará el conteo y el botón de la iteración final del bucle. Esto se debe a que React solo actualiza la variable de estado de la última iteración.
En lugar de usar State dentro de un ciclo, puede declarar una variable de estado fuera del ciclo. De esta manera, React solo creará una variable de estado y la actualizará en consecuencia.
importar Reaccionar, { estado de uso } de 'reaccionar';funciónaplicación() {
// Esta es la forma correcta de usar useState dentro de un ciclo
constante [contar, establecerCuenta] = usarEstado(0);para (dejar yo = 0; yo < 10; i++) {
// ...
}
devolver (
<división>
<pag>{contar}</pag>
<botón onClick={() => setCuenta (cuenta + 1)}>
Haz click en mi
</button>
</div>
);
}
4. No abuses de los anzuelos
Los React Hooks son una herramienta poderosa, pero debes evitar usarlos en exceso. Si te encuentras usando varios Hook en cada componente, es posible que los estés usando en exceso.
Los ganchos de reacción son más útiles cuando necesita compartir el estado entre varios componentes. Evite usar Hooks innecesarios porque pueden hacer que su código sea difícil de leer y pueden afectar el rendimiento si se usan en exceso.
Agregue más funcionalidad usando React 18 Hooks
Con el lanzamiento de React 18, hay nuevos ganchos disponibles. Cada gancho es específico para una determinada característica de React. Puede encontrar una lista de todos los ganchos disponibles en el sitio web de React. Pero los ganchos más utilizados siguen siendo useState y useEffect.
