¿Qué es el estado?

Quizás te hayas preguntado cómo es que la función console.log se logra ejecutar cada vez que el valor del search cambia, si se supone que está declarada fuera del onChange.

Resulta que la función console.log se ejecuta cada vez que el componente se renderiza, no solo cuando se activa el evento onChange. Debido a que está declarada dentro del cuerpo de la función del componente TodoSearch, la cual se ejecuta cada vez que el componente se (re)renderiza. Entonces, cuando el usuario escribe algo en el search, se activa el evento onChange, se actualiza el estado searchValue con el nuevo valor y se vuelve a renderizar el componente, lo que provoca que se ejecute la función console.log nuevamente con el nuevo valor de searchValue.

Compañeros fijense que cuando usamos el useState(), ese arreglo que nos devuelve es una const. Y algunos diran: "pero si el estado va a estar cambiando por qué lo guardamos como una constante y no usamos “let”?

La respuesta es que en React el estado está diseñado para ser inmutable, lo que significa que no debemos modificar directamente el valor del estado. En su lugar, React proporciona una función específica para actualizar el estado y generar un nuevo valor.

🔵Consideraciones del hook useState

Desestructuración para ser más declarativo

El hook useState retorna una array con dos posiciones, el primero valor del estado y el segundo su actualizador (por convención empieza por set).

function Component () {
	const state = useState("valor inicial")
	const searchValue = state[0]	
	const setSearchValue = state[1]

	return <div> ... </div>
}

.
Pero este código es muy verboso, es decir, mucho texto. Por lo que utilizamos la desestructuración de arrays para reducir a una sola línea de código.

function Component () {
	const [searchValue, setSearchValue] = useState("valor inicial")

	return <div> ... </div>
}

.
Fuente: El estado: memoria de un componente
.

Si el estado cambia, se renderiza el componente

En React se vuelve a renderizar un componente y sus hijos en 2 situaciones: cuando se cambia el estado (con la función set...) y cuando sus props cambian.
.
El renderizado en React vuelve a “ejecutar” TODA la función: hooks, variables, funciones y sus elementos. PEEEERO, el useState no se vuelve a ejecutar, es decir, el useState solo se crea una sola vez durante toda la vida útil del componente.
.
Fuente: Renderizado y confirmación
.
.

La actualización del estado es asíncrono

Supongamos que tenemos un componente que al darle click se efectúa la siguiente función. ¿Cuál crees que sea el valor del estado de counter cuando el componente vuelva a renderizarse?

// Referencia para el ejemplo
// const [counter, setCounter] = useState(0)

function handleCounter () {
	setCounter(counter + 3)
	setCounter(counter + 3)
	setCounter(counter + 3)
}

.
La respuesta es 3, ¿por qué? Porque la actualización es asíncrona, React únicamente tomará en cuenta el valor del nuevo estado en su última invocación. Esto provoca que tengamos valores en el estado pasados o no actualizados correctamente.
.
¿Se puede arreglar esto? Sí, si pasamos un callback al actualizador del estado donde el parámetro será el valor anterior de ese estado (no necesariamente con el mismo nombre del estado), el comportamiento será el que esperamos, mostrar un valor 9.

function handleCounter () {
	setCounter(prevCounter => prevCounter + 3)
	setCounter(prevCounter => prevCounter + 3)
	setCounter(prevCounter => prevCounter + 3)
}

.
Fuente: Poner en cola una serie de actualizaciones del estado
.

¿Qué es el Estado?
…
El "Estado" es una de las principales herramientas que React nos proporciona para crear UI´s dinámicas y actualizadas en tiempo real.
Podríamos definir al Estado como “Variables que almacenan información dinámica de un componente y se actualizan a medida que el usuario interactúa con los Componentes”.
Aquella información utilizada en el estado puede ser utilizada por el componente para cambiar su apariencia y comportamiento en tiempo real.
El estado también nos permite mantener la información actualizada de un componente sin necesidad de renderizar todo el componente, esto gracias al Virtual DOM que compara los cambios que se hicieron y los actualiza.

Me encanta el salto de calidad/producción que dio este curso.

Clase 7 Que es el estado?

El estado en React, también conocido como state, es el segundo tipo de dato que maneja esta librería de JavaScript. Mientras que las props son los datos que podemos pasarle a un componente o elemento React desde afuera, un estado se conforma por los datos internos que un componente puede manejar. keepcoding.

Creación de un estado

Primero se debe importar el estado desde React:

import React from "react";

Luego definimos la constante a la cual le asignaremos el estado:

const [searchValue, setSearchValue] = React.useState(); // Es una función por eso los ()

Este estado es inmutable, por lo tanto es una funcion controladora de estados. Por convención debe utilizar los dos parametros el primero es un controlador de estados y el segundo parametro actualizador enviado por useState. (Estos pueden cambiar de acuerdo a lo que se necesita).

Luego necesitaremos un valor inicial que lo enviaremos al ejecutar la función useState("") y este lo conectaremos con el input enviandole la propiedad value={searchValue}.

Ahora bien, para evitar errores una vez renderizados los componentes necesitamos enviar un valor por defecto al input de tipo search y dentro del evento onChange utilizamos el valor del texto ingresado por el usuario:

onChange={(event) => {
  setSearchValue(event.target.value);
}}

Render React - DOM Virtual

El render y el re render de React es una ejecución del motor de React automaticamente cuando detecta que el actualizador useState a cambiado. El motor de react crea un Virtual DOM el mismo que se compara con el DOM del navegador y unicamente re renderiza los componentes que que son diferentes. de esta forma funciona el motor de React.

Cuando Juan dijo “pero por qué no crear simplemente una variable y actualizarla”, me leyó la mente literal jajaja.

Y claro, es obvio, la variable se actualiza pero no se renderiza por qué no está dentro del evento de click como tal.

En JS vanilla tendríamos que llamar al evento click, pasarle una función y dentro de esa función ahí si renderizar todo el html que necesitemos cambiar cada vez que se de click.

Evidentemente en React al ser declarativo y no imperativo, no tiene sentido llamar a otra función que renderice el html con document.createElement o algo así.

Entonces la opción más obvia es simplemente convertir todo el componente en el renderizado del evento onCLick como tal, y eso se logra con el useState().

Cada que se modifica el useState(), se renderiza de nuevo el componente, como si se tratase de la función directa que ejecutariamos desde el evento en Vanilla.

Bueno así lo entendí yo, tratando de asociarlo a Js puro.

Mucho valor agregado en los comentarios. Comunidad, gracias por compartir.

Si a alguien se le duplica el console.log es porque debe estar dentro de la función que maneja el evento y no por fuera. Así se evita que se ejecute dos veces cada vez que el estado cambia, Al menos esa fue mi experiencia. Ojalá les sirva.

Estuve buscando sobre el estado y el useState, y me topé con el concepto de Hook, me surgieron varías dudas, pero aquí dejo mis notas de lo que he investigado hasta ahora 😀:
.

React Hooks 🪝

Funciones que permiten “hook it” (engancharte) al estado, a las características del ciclo de vida de React.

Hooks at a Glance – React (reactjs.org)
.

• Agregadas en React 16.8 (2019)
• Todos los hooks empieza con la palabra reservada use, incluso nuestros Custom Hooks
• React Hooks:
  • 🚗 Básicos (en el 100% de tus proyectos):
    • useState: Para gestionar estados. Devuelve un valor con estado y una función updater para actualizarlo.
    • useEffect: Para gestionar efectos secundarios como llamadas a la API, suscripciones, temporizadores, mutaciones, etc.
      .
  • 🏎️ Avanzados:
    • useReducer: Una alternativa a useState para ayudar con la gestión de estados complejos.
    • useContext: Para devolver el valor actual de un contexto.
    • useCallback: Devuelve una versión memorizada de una devolución de llamada para ayudar a un componente hijo a no volver a renderizar innecesariamente.
    • useMemo: Devuelve un valor memorizado que ayuda en las optimizaciones de rendimiento.
    • useRef: Devuelve un objeto ref con una propiedad .current. El objeto ref es mutable. Se utiliza principalmente para acceder imperativamente a un componente hijo.
    • useLayoutEffect: Se dispara al final de todas las mutaciones del DOM. Es mejor utilizar useEffect en la medida de lo posible, ya que useLayoutEffect se activa de forma sincrónica.
    • useDebugValue: Ayuda a mostrar una etiqueta en React DevTools para ganchos personalizados.

.
Otras fuentes:

• ¿Qué son los hooks? - React.js Wiki
• Hooks - jonmircha YouTube
• React Hooks - jonmircha

que buen ejemplo y explicacion con las ilustraciones muy entendido como funciona el render en React

Llevo usando React hace tiempo y sinceramente pese a que es simple nunca habia procesado al 100% cómo funciona useState y useEffect, muy buena clase 10/10

jejejejjejejejej que buen contenido, felicitaciones platzy

Amo como explica, mas cursos como este por favooor ♥

Introducción al Estado en React.js

• En la clase anterior, exploramos cómo manejar eventos e interacciones de usuarios en nuestra aplicación. Ahora, necesitamos un lugar para almacenar y actualizar la valiosa información recopilada durante estas interacciones.

• La solución es utilizar una poderosa herramienta de React.js llamada estado. Los estados nos permiten almacenar datos que pueden cambiar a lo largo del tiempo, como las entradas de los usuarios.

• Para comenzar a trabajar con el estado, debemos importar React y utilizar la función useState. Aunque anteriormente no importamos React en todos nuestros componentes debido a una configuración especial, en este caso, es necesario importarlo.

  import React, { useState } from 'react';
  

Creación de un Estado en React.js

• Vamos a crear un estado llamado searchValue para almacenar y actualizar la información ingresada por los usuarios en un campo de búsqueda.

  const [searchValue, setSearchValue] = useState('');
  

  Aquí, searchValue representa el estado actual, mientras que setSearchValue es la función actualizadora del estado que nos permite cambiar su valor de manera inmutable.

Conexión del Estado con un Input de Búsqueda

• Para conectar el estado con un campo de entrada (input) y permitir que los usuarios vean y actualicen la información, configuramos el valor del input para que sea igual al estado searchValue.

  <input
    type="text"
    value={searchValue}
    onChange={(event) => setSearchValue(event.target.value)}
  />
  

  Ahora, cada vez que los usuarios escriben en el campo de búsqueda, el estado se actualiza y refleja automáticamente en el input.

Visualización del Estado en la Consola

• Para confirmar que el estado se actualiza correctamente, utilizamos console.log para mostrar el valor actual del estado fuera del retorno del componente.

  console.log('Los usuarios buscan TODOS de ' + searchValue);
  

  Esto nos permite verificar en la consola que el estado se actualiza cada vez que los usuarios interactúan.

Resumen y Próximos Pasos

• Hemos aprendido a utilizar el estado en React.js para almacenar y gestionar datos que cambian con las interacciones de los usuarios.
• En la próxima clase, continuaremos utilizando el estado para implementar funcionalidades como contar todos, buscar todos, completar todos y eliminar todos en nuestra aplicación. ¡Nos vemos allí!

Hice hace un tiempo el curso de react de Oscar, la verdad es que me ayudo mucho. Pero este curso hasta ahora, lo veo muy superador en terminos de explicacion del contenido. No se si el anterior seguira disponible, tiene cosas muy interesantes, asi que me parece que despues de hacer este curso, se podria ir a ver el otro, talvez no completo, pero tiene cosas muy interesantes tambien.
Es impresionante como ha mejorado en terminos de estetica y edicion de video este nuevo curso en comparacion con el resto que he hecho. Felicitaciones Platzi Team!

Diste {state} clicks

Tips

Intenta nombrar los estados, en una palabra y lo más vinculado a tu código:
Ej:
1- [current, setCurrent] = useState();
2- [scroll, setScroll] = useState();

¿Qué es el estado? States

💡 Los States en React son variables que siempre estan siendo trackeadas por React, cuando tienen algun cambio se vuelven a renderizar en el Virtual DOM de React.

Como Crear un estado en React JS

1. importar React
   import React from 'react’

2. El el cuerpo de la funcion / Componente se define el estate. de la siguiente manera
   const [searchValue, setSearchValue] = React.useState('');
   .
   

   

3. Para modificar el estado se llama al setNombreEstado() y por parametro se le pasa el nuevo valor del estado
   setSearchValue('Nuevo valor')

4. Cada vez que se modifique el estado mediante setNombreEstado(), todos los elementos donde este implicado este estado seran renderizados / actualizados nuevamente en el Virtual DOM de React

import React from 'react’

function TodoClick() {
	// Se define el State, su modificador y su valor inicial
  let [ state, setState ] = React.useState(0);

  return (
    <>
      <p>
        Diste click
        {state} veces
      </p>
      <button>
        onClick={() => {
					// setState para modificar el estado
          setState(state++)
        }}
      </button>
    </>
  )
};

¡Entendido! Vamos a analizar específicamente estas líneas de código:

const [searchValue, setSearchValue] = React.useState('');
value={searchValue} // el valor inicia con un string vacío y se va a ir actualizando
onChange={(event) => {
    setSearchValue(event.target.value); // al escribir se tomará el valor y es el responsable del cambio
}}

1. const [searchValue, setSearchValue] = React.useState('');

   • Define un estado llamado searchValue que inicia con un string vacío.
   • setSearchValue es la función que se utilizará para actualizar el valor de searchValue.

2. value={searchValue}

   • Asocia el valor del campo de entrada (posiblemente un input de formulario) con el estado searchValue.
   • Esto significa que el valor inicial del campo de entrada será el valor actual de searchValue.

3. onChange={(event) => { setSearchValue(event.target.value); }}

   • Establece un manejador de eventos para el cambio en el campo de entrada.
   • Cada vez que se escribe algo en el campo de entrada, esta función se ejecutará.
   • event.target.value es el nuevo valor del campo de entrada, y setSearchValue se utiliza para actualizar el estado searchValue con este nuevo valor.
   • En resumen, esta línea asegura que cada vez que el usuario escribe algo en el campo de búsqueda, se actualice el estado searchValue con el nuevo valor.

Aquí les dejo un video de Antonio Sarosi sobre el DOM Virtual (Es con VueJs) Juan lo dejó bien claro, pero por si les sirve

https://www.youtube.com/watch?v=vAt_zgEGdOw

por que tengo que darle dos clicks en el boton para que me muestre el nuevo numero

Increíble la evolución de presentación, del excelentísimo profe JuanDc, y de la plataforma en general, mas interactiva y explicativa

Si haces console.log() del searchValue, va a ir un caracter atrasado. Esto sucede por que useState es async.
No lo sabia y busque el error en todos lados ajajja

Este maestro y caballero vive cada palabra, y le facilita el aprendizaje y por lo tanto la vida a más de uno, espero siga contribuyendo con más cursos.🤯

Cuando manejamos el estado de un componente, y este cambia con el evento onChange de un input, se pueden dar cuenta que no es necesario establecer el estado como valor para la propiedad value del elemento, si solo quieren almacenar la informacion de este. Pero si no me equivoco, en caso de que sí corríjanme, a la propiedad value del input le asignamos el valor del estado para despues manipular lo que se muestra en el input a traves de las modificaciones que hacemos en el estado.
Un ejemplo de esto es cuando pedimos el nombre del todo para crear una nueva tarea y queremos que una vez que la tarea se haya creado, el value del input sea un string vacío, y no se muestro el nombre del todo que recien creamos, para que así el input se quedé vacío, o se muestre el placeholder.

Lo que me pareció más interesante / importante de la clase:

• Cada vez que actualizamos el estado en un componente de React éste se va a renderizar nuevamente.
• Cuando el componente se re-renderiza, no solo muestra los cambios sino que también ejecuta el código que esté declarado dentro del componente (como el console.log() ).
• Podemos caer en el error de querer ejecutar código (ej. un console.log() ) al mismo nivel en el que llamamos al “setter” o a la función actualizadora del estado, lo cual generará un resultado inesperado, pues lo que se ejecuta sería antes del nuevo render y veríamos resultados antes de haber actualizado el estado (no sé si me expliqué).
• No podemos cambiar directamente el valor del estado, por eso se hace uso de una función “setter”. De hecho, declaramos el estado como una constante.

Excelente explicación del hook useEffect, pero sobre todo excelente actualización del curso.

Tremendas animaciones, son buenas para enterder mejor.