React Hooks

Search…
React Hooks
Los hooks, introducidos en React 16.8, nos permiten utilizar el estado y otras características de React sin necesidad de convertir nuestros componentes a clases.
Algunas de las funcionalidades que podemos utilizar son: manejo del estado con useState, manejo de efectos secundarios como peticiones HTTP con useEffect, crear referencias con useRef, entre otras.
Nota: es importante notar que React no removió el uso de clases en su API, simplemente con los hooks, se le dio soporte a características en los componentes función que solo estaban disponibles en componentes clase. Esto quiere decir que ahora tenemos una alternativa diferente para crear nuestros componentes, los conceptos básicos de React siguen siendo los mismos.
useState
useState es el hook que nos permite crear un estado para nuestros componentes función. Recibe como argumento el valor inicial del estado. Retorna un arreglo, donde la primera posición es el valor del estado, y la segunda posición es una función que modifica el estado.
1
const Counter = () => {
2
  // Usando desctructuring podemos nombrar las posiciones del arreglo
3
  // [0] es el valor actual del estado
4
  // [1] es la función encargada de reasignar el valor del estado
5
  const [count, setCount] = React.useState(0);
6
​
7
  return (
8
    <div className="container">
9
      <button
10
        className="button"
11
        onClick={() => setCount(count + 1)}
12
      >
13
        Click Me
14
      </button>
15
      <span className="content">Clicked {count} times</span>
16
    </div>
17
  );
18
}
Copied!
En este caso el valor inicial del estado es 0. En la asignación del estado estamos haciendo un destructuring del estado, la primera posición la llamamos count y la segunda posición setCount.
useEffect
useEffect es el hook que nos permite manejar efectos secundarios. useEffect recibe 2 argumentos, el primero es una función que se ejecutara después de que el componente se rendericé; el segundo argumento es un arreglo, este se conoce como las dependencias de nuestro hook, cuando el valor de alguna de las variables que nosotros agreguemos al arreglo de dependencias cambia, la función que pasamos como primer argumento es invocada nuevamente.
1
const App = () => {
2
  const [posts, setPosts] = React.useState([]);
3
​
4
  // Este useEffect no tiene dependecias
5
  // Solo invoca las función después del primer renderizado.
6
  React.useEffect(() => {
7
    fetch('https://jsonplaceholder.typicode.com/posts')
8
      .then(response => response.json())
9
      .then(json => setPosts(json));
10
  }, []);
11
​
12
  return (
13
    posts.length > 0 && posts.map(({ id, title, body }) => (
14
      <div className="post" key={id}>
15
        <h2>{title}</h2>
16
        <p>{body}</p>
17
      </div>
18
    ))
19
  );
20
}
Copied!
En este caso estamos haciendo una petición HTTP, cuando la respuesta es exitosa almacenamos la respuesta en el estado.
Podemos definir un arreglo vacío, en este caso la función solo es invocada la primera vez que se renderiza el componente, o componenteDidMount.
Si pasamos un segundo argumento al useEffect, la función se invoca cada vez que el componente se actualiza. Ojo, puedes causar un ciclo infinito. Es recomendable pasar siempre al menos un arreglo vacío.
Creando nuestro propio use hook
Es posible crear nuestros propios hooks utilizando los hooks básicos proporcionados por React. Para esto debemos crear una función, por convención su nombre debe empezar con use y retornar los valores que queremos compartir. De esta manera podemos reutilizar funcionalida.
1
const useCount = (initialCount) => {
2
  const [count, setCount] = React.useState(initialCount);
3
​
4
  return [count, setCount];
5
}
6
​
7
const CounterBy10 = () => {
8
  const [count, setCount] = useCount(100);
9
​
10
  return (
11
    <div>
12
      <button
13
        type="button"
14
        onClick={() => setCount(count + 10)}
15
      >
16
        Counter 1
17
      </button>
18
      <span>{count}</span>
19
    </div>
20
  );
21
}
22
​
23
const CounterBy20 = () => {
24
  const [count, setCount] = useCount(200);
25
​
26
  return (
27
    <div>
28
      <button
29
        type="button"
30
        onClick={() => setCount(count + 20)}
31
      >
32
        Counter2
33
      </button>
34
      <span>{count}</span>
35
    </div>
36
  );
37
}
38
​
39
const App = () => (
40
  <>
41
    <CounterBy10 />
42
    <CounterBy20 />
43
  </>
44
);
Copied!
Reglas de los hooks
1.solo debes invocar un hook desde el nivel más alto de una función. Esto quiere decir que un hook nunca debe de ser invocado dentro de un conditional, un ciclo, o una función anidada.
1
const App = () => {
2
  // bien
3
  const [name, setName] = React.useState('');
4
​
5
  // mal
6
  if (name !== 'Pedro') {
7
    const [lastName, setLastName] = React.useState('Pérez');
8
  }
9
}
Copied!
1.Los hooks no se deben invocar desde funciones de JavaScript. Esto quiere decir que solo debemos invocar los hooks desde componentes de React o hooks propios.
1
// bien
2
const Component = () => {
3
  const [user, setUser] = React.useState(null);
4
}
5
​
6
// también bien
7
const useCustomHook = () => {
8
  const [count, setCount] = React.useState(0);
9
​
10
  return [count, setCount]
11
}
12
​
13
//mal
14
const sum = (num1, num2) => {
15
  const [value, setValue] = React.useState(0);
16
​
17
  return num1 + num2;
18
}
Copied!
Para una guía completa de los hooks visita la Referencia de la API de los Hooks.
Peticiones HTTP con Axios
React Context
Last modified 2yr ago
Copy link
Contents
useState
useEffect
Creando nuestro propio use hook
Reglas de los hooks