Los ganchos (Hooks) de React son funciones que permiten a los componentes funcionales de React acceder a características que antes solo estaban disponibles para los componentes de clase, tales como el estado del componente y los métodos del ciclo de vida.
Aquí te dejo un ejemplo de cómo usar algunos de los ganchos más comunes:
1. useState: Este gancho permite a los componentes funcionales acceder al estado del React. Aquí hay un ejemplo:
```jsx
import React, { useState } from ‘react’;
function Ejemplo() { const [count, setCount] = useState(0);
return (Haz clic {count} veces
En el código anterior, al principio se inicializa un nuevo estado con el valor de 0 utilizando `useState(0)`. Luego, se utiliza el método `setCount` para actualizar el estado.
2. useEffect: Este gancho permite a los componentes funcionales realizar efectos secundarios, es como una combinación de `componentDidMount`, `componentDidUpdate`, y `componentWillUnmount` en clases. Aquí hay un ejemplo:
```jsx
import React, { useState, useEffect } from ‘react’;
function Ejemplo() { const [count, setCount] = useState(0);
useEffect(() => { document.title = `Haz clic ${count} veces`; }); return (Haz clic {count} veces
En el código anterior, el `useEffect` se ejecuta después de cada renderización. Cuando el `count` cambia, se actualiza el título del documento.
3. useContext: Este gancho permite a los componentes funcionales acceder al valor actual de un contexto de React sin tener que enredar el componente con un Consumer. Aquí hay un ejemplo:
```jsx
import React, { useContext } from ‘react’;
const MyContext = React.createContext();
function Ejemplo() { const contextValue = useContext(MyContext);
return{contextValue}
; } ```Recuerda que para usar Hooks debes asegurarte de tener la versión 16.8.0 o superior de React en tu proyecto.
