DEV Community

Cover image for Estado en componentes funcionales (useState).
Alberto Sandoval
Alberto Sandoval

Posted on

Estado en componentes funcionales (useState).

Los estados en React nos permiten controlar los valores y datos que maneja un componente. Permiten que este sea capaz de cambiar la interfaz sin renderizar todo el DOM. Podemos decir que es una manera de tener variables que podemos cambiar de manera dinámica.

useState

El componente funcional, para controlar los valores de estado, importa una función Hook, llamada useState.

importando useState: import React, {useState} from 'react';

useState Es similar a tener una variable, así que después de importarlo dentro de nuestro archivo, podemos asignarle un valor dentro de nuestro componente.

Ejemplo de Asiganación de un valor al useState: const [name, setName] = useState('Alberto');

useState es una función que nos retornara algo al pasarle un argumento, ese argumento puede ser cualquier tipo de dato (string, null, number, etc.), useState puede funcionar incluso sin recibir el argumento antes mencionado. En el ejemplo de arriba el argumento seria 'Alberto' y este se tomara como el valor inicial.

useState básicamente regresa un arreglo con dos valores: un valor y un set. Gracias al set podemos actualizar el valor de estado de nuestro componente cuando lo requiramos.
Para realizar el cambio de estado de un componente con el set necesitamos de un evento que active o llame la función, como en el ejemplo de la imagen anterior, al set se le asigno el nombre setName();

Algunas de las varias formas de declarar argumentos en useState:
const[name, setName] =useState('');<br>
const[nickName, setName] =useState('Beto');<br>
const[age] =useState();<br>
const[, setSomething] =useState('Hey!');

Top comments (0)