Section 4: React State & Working Flashcards
React State & Working
Con React seguimos el Declarative Approach donde definimos el estado deseado del target y React se encarga de alcanzar ese estado.
Manejar eventos a través del STATE CONCEPT, manipular el STATE y hacer transiciones de un STATE a otro.
Event Listeners
Tenemos Event Listeners para todos los elementos HTML. En JS accedíamos a ellos a través de un selector y luego agregando un EventListener.
En React, para acceder a los Events usamos un SPECIAL PROP que siempre comienza con ON. Estos Event Handlers.reciben un función como valor.
BUENA PRÁCTICA: Puedo terminar el nombre de mis funciones con la palabra Handler para indicar que está asociada a un Evento.
JSX y Funciones
Nunca agregues muchas funciones en tu código JSX.
Las funciones en el JSX se llaman sin paréntesis porque de lo contrario las ejecutaría JavaScript.
Nota sobre Componentes
IMPORTANTE: mi componente es una función con la única diferencia de que devuelve JSX.
Actualización de Estados y Componentes
Ni el cambio de valor de las variables ni la inicialización de Event Listeners no actualizan el estado de los componentes.
Para hacer posibles esas actualizaciones de estado, necesitamos importar useStade desde la líbrería React:
useState()
La función useState (es un HOOK) nos permite definir valores como estados para que los cambios hechos sobre dichos valores sean actualizados en el componente;
Al igual que todos los React Hooks la función UseState()
1# Empieza con la palabra Use.
2# Se declara dentro del componente (los HOOKS solo deben llamarse dentro de funciones de react, no pueden llamarse fuera de los componentes ni en funciones anidadas, a excepción de UN HOOK.
useState recibe un estado como valor y con esto nos permite crear un tipo especial de variable; una variable que al cambiar de estado, hará que el component function (App.js por ejemplo), sea llamada de nuevo.
Reglas useState()
°No se define el valor de useState con el signo de = sino llamando a una función específica.
°useState() devuelve un arreglo con solo dos elementos en el que, el primer elemento es el VALOR que se le asigna en si misma y el segundo elemento es el UPDATING FUNCTION.
°Usamos Array Destructuring para poder almacenar en variables los elementos en el arreglo, devueltos por useState.
La CONVENCIÓN para nombrar las variables en el Array Destructuring de un HOOK:
°PRIMERA VARIABLE: se le asigna un nombre que describa el valor (este es el valor inicial).
°SEGUNDA VARIABLE: se le asigna un nombre que empieza por la palabra set seguida del mismo nombre que se le asignó a la primera variable (esta es la función que actualiza el valor inicial).
A Closer Look at the “useState” Hook
°useState registra un valor como estado, para el componente específico dentro del que ha sido llamado; cada vez que el component es llamado, se le delega un nuevo useState que React, maneja de forma independiente.
°Solo las instancias en las que el state cambia, son actualizadas (para cada instancia) tenemos estados separados.
°Se puede usar const con useState().
Listening to User Input
Entre las propiedades que recibo del EventListener a través del parámetro EVENT hay algunas como target:input, que apunta al evento que ha provocado la activación del EventListener y también posee VALUE PROPERTY que contiene el valor exacto del input.
const titleChangeHandler = (event) => {
console.log(event.target.value);
};
useState() e inputs
useState() me permite almacenar los valores que recibo a través de input ayudando a que no cambien cuando los componentes sean actualizados.
¿Cómo manejar múltiples estados?
Puedo tener múltiples states en un mismo componente y cada state estará separado uno del otro.
NOTA: por defecto siempre que escucho al change event para un inpunt, el valor siempre será un string, incluso si el valor es un número o una fecha.
Updating State That Depends On The Previous State
KEY RULE: Siempre que actualice un STATE que dependa del STATE anterior, debe ser a través de un Call Back Function.
Si uso este approach React garantizará que el ESTADO que reciba sea el más actualizado porque tiene en cuenta todos los scheduled state updates.
NOTA: React “agenda” los STATE UPDATES, no los ejecuta de forma automática.
Handling Form Submission
°Cuando un botón es presionado en un formulario, se genera un evento que podemos escuchar a través de un Event Listener y ese es el Summit Event, que podemos capturar con onSubmit.
°Cuando un botón es presionado en un formulario la página se actualiza porque el botón envía un request al server que está hosteando el webpage.
event.preventDefault();
Adding Two-Way Binding
Two-way Binding es muy útil para trabajar con forms porque me permite recolectar user inputs y también cambiarlo. Por ejemplo al momento de un form submission
Two-way Binding significa que para los inputs podemos escuchar pero también podemos poner un nuevo VALOR de vuelta o resetearlo con el atributo value en el elemento input.
