Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Cuando actualizamos una variable state, automáticamente, en caso de ser necesario, el código html vinculado a esa variable es actualizado.
La diferencia entre un estado de React y una variable normal es que cuando un estado cambia, el componente es renderizado de nuevo y se ejecutarán los useEffect vinculados a ese estado, pero cuando cambia una variable normal, esto no ocurre.
Por otro lado, el ciclo de vida de una variable normal acaba en cada render, ya que se vuelve a generar otra. En el caso de un esto, su valor es conservado a través de los sucesivos renders.
Los hooks (useState y useEffect)fueron introducidos en la versión 16.8 de react. Por tanto, para utilizarlos, deberemos tener al menos esta versión en el package.json
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",Modificar un estado
Cuando queremos modificar un estado, utilizaremos el segundo parámetro que devuelve la función useState, que al ejecutarla nos guardará el parámetro que le pasemos como nuevo valor del estado.
import {useState} from 'react';
const MyCounter = () =>{
const [contador, setContador] = useState(0);
const incrementarContador = () => setContador(contador + 1)
return <button onClick={incrementarContador}>{contador}</button>
}
export default MyCounter;Ejercicios useState y useRef
Ahora modificaremos los ejercicios que vimos en la sección de useRef para utilizar useState a la hora de mostrar el resultado. Seguiremos utilizando useRef para la recogida de valores.
1. Euros a dólares
Hay que realizar un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje en pantalla con el correspondiente valor en dólares.
2. Grados centígrados
Hay que realizar un conversor de grados Centígrados a grados Fahrenheit.
Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.
Con useState también podemos recoger un valor del usuario
Si queremos recoger un valor introducido por el usuario, también usaremos useState. No obstante, es posible hacer esto utilizando el método useRef, pero dado que este no funciona en ReactNative, no lo vamos a ver.
import { useState } from 'react';
const App = () => {
const [inputText, setInputText ] = useState('');
return (
<div>
<input type="text" onChange={e => setInputText(e.target.value)} />
<div>{ inputText }</div>
</div>
);
}
export default App;En el caso de que quisieramos saber si una checkbox está marcada o no, usaríamos la propiedad checked:
<input type="checkbox" onclick={e=> setEstaMarcado(e.target.checked)}/>Ejercicios únicamente usando useState
Ahora modificaremos los ejercicios que vimos en la sección de useRef para utilizar useState en su lugar.
La solución debe ir imprimendose a medida que vamos introduciendo los datos, sin que sea necesario pulsar ningún botón de «calcular».
1. Euros a dólares
Hay que realizar un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje en pantalla con el correspondiente valor en dólares.
2. Grados centígrados
Hay que realizar un conversor de grados Centígrados a grados Fahrenheit.
Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.
Cambiar valor al hacer click en un botón, en lugar de cuando cambia el input
import { useState } from 'react';
const App = () => {
const [inputText, setInputText] = useState('');
const [valorAMostrar, setValorAMostrar] = useState(0);
return (
<div>
<input type="text" onChange={e=> setInputText(e.target.value)} />
<button onClick={() => setValorAMostrar(inputText)}>Cambiar valor</button>
<div>{valorAMostrar}</div>
</div>
);
}
export default App;3. Calcular la superficie de un rectángulo
Tendremos un formulario que recogerá el ancho y el alto de un rectángulo y calculará su superficie.
4. Cambia imagen
Desarrollar la siguiente aplicación. Al pulsar sobre cada uno de los botones, debe cargarse la imagen correspondiente a una de las propiedades del siguiente objeto:
const ANIMAL_IMAGES = {
img1: "http://via.placeholder.com/111x111",
img2: "http://via.placeholder.com/222x222",
img3: "http://via.placeholder.com/333x333",
};
Problema al usar estados con setInterval y setTimeout
La siguiente función:
setInterval( () => setSeconds(seconds +1), 1000);Debería actualizar el estado seconds incrementándole una unidad a cada segundo. Sin embargo esto no ocurre debido a que la función que recibe como parámetro setInterval es almacenada en memoria y no se va a actualizar (siempre se llamará exáctamente al mismo código y seconds siempre valdrá lo mismo).
Para subsanar este problema, cambiaremos la función anterior por:
setInterval(() => setSeconds(seconds => seconds + 1), 1000);Otro ejemplo:
Cuando actualizamos un estado utilizando la función setTimeout de Javascript:
const [stateValue, setStateValue] = useState(0);
const recursiveFunction = () => {
setTimeout(() => {
setStateValue(stateValue + 1);
console.log(stateValue);
recursiveFunction();
}, 1000);
}Tendremos un problema. Y es que al hacer el log, veremos que el valor de stateValue no cambia.
Para resolver este problema tenemos dos opciones:
1. Una sería pasarle una función al método setStateValue cuyo primer parámetro será el valor actual del estado. Dentro de esa función, stateValue tendrá el valor correcto.
const recursiveFunction = () => {
setTimeout(() => {
setStateValue(stateValue => {
//Aquí vendría el código que utiliza stateValue
return stateValue + 1;
});
recursiveFunction();
}, 1000);
}2. La otra forma, sería utilizando useEffect (el useEffect lo veremos más adelante en este curso):
const recursiveFunction = () => {
setTimeout(() => {
setStateValue(stateValue => stateValue+1);
recursiveFunction();
}, 1000);
}
useEffect(() => {
//Aquí vendría el código que utiliza stateValue
}, [stateValue]);