No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
3 Hrs
42 Min
30 Seg
Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

¿Qué es el estado?

7/34
Recursos

Aportes 49

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.

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.

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.

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:

11:12 "Hagamos lo que hace la gente cuando algo falla, sigamos dándole click" XD
⚛️ El estado en React.js es un concepto fundamental para manejar datos que pueden cambiar a lo largo del tiempo en tus componentes. Aquí te detallo qué es y cómo funciona: 1\. \*\*¿Qué es el Estado?\*\* \- El estado de un componente en React es un objeto que almacena información que puede cambiar durante la vida útil del componente. \- Este estado es local y encapsulado dentro del componente; otros componentes no pueden acceder directamente a él, a menos que se les pase como props. 2\. \*\*¿Para qué se utiliza?\*\* \- Se utiliza para manejar datos dinámicos en una aplicación. Esto incluye datos que cambian en respuesta a acciones del usuario, respuestas de una API, temporizadores, entre otros. \- El estado permite a los componentes reaccionar y actualizar la interfaz de usuario cuando los datos cambian. 3\. \*\*Manejo del Estado:\*\* \- En los componentes de clase, el estado se inicializa en el constructor y se accede a través de `this.state`. Para actualizar el estado, se debe usar el método `this.setState()`. \- En los componentes funcionales, el estado se maneja a través del Hook `useState`. Este Hook permite agregar estado a componentes funcionales. 4\. \*\*Ejemplo con Componente de Clase:\*\* ```jsx class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( \
\

Count: {this.state.count}\

\<button onClick={this.increment}>Increment\</button> \
); } } ``` En este ejemplo, `count` es una propiedad del estado del componente `Counter`. Cuando se hace clic en el botón, el método `increment` se llama y actualiza el estado. 5\. \*\*Ejemplo con Componente Funcional:\*\* ```jsx function Counter() { const \[count, setCount] = React.useState(0); const increment = () => { setCount(count + 1); }; return ( \
\

Count: {count}\

\<button onClick={increment}>Increment\</button> \
); } ``` Aquí, `useState` se usa para agregar estado al componente funcional. `count` es el valor actual del estado, y `setCount` es la función para actualizarlo. En resumen, el estado en React es esencial para manejar datos que cambian en el tiempo, permitiendo a los componentes ser interactivos y reactivos a las entradas y acciones del usuario.

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

\# 07/34 Curso de React.js: ¿Qué es el estado? En React, el "estado" (state en inglés) es uno de los conceptos fundamentales y poderosos que permite a los componentes React mantener y gestionar datos que pueden cambiar con el tiempo. El estado es una parte integral de la gestión de la interfaz de usuario y permite que los componentes se vuelvan interactivos y reactivos. Aquí hay algunos aspectos clave sobre el estado en React: 1. **Estado de Componente:** El estado es un objeto JavaScript que se utiliza para almacenar datos que deben ser rastreados y posiblemente modificados por un componente React. Cada componente de clase en React puede tener su propio estado. Los componentes funcionales también pueden utilizar el estado mediante el uso de hooks como `useState`. 1. **Inmutabilidad:** En React, el estado es inmutable. Esto significa que no debes modificar el estado directamente. En su lugar, debes utilizar el método `setState` (en componentes de clase) o el valor devuelto por `useState` (en componentes funcionales) para actualizar el estado. React detectará los cambios en el estado y volverá a representar el componente según corresponda. 1. **Actualización del Render:** Cuando el estado de un componente cambia, React vuelve a representar el componente para reflejar esos cambios en la interfaz de usuario. Esto se hace de manera eficiente para minimizar la cantidad de manipulación del DOM. **Ejemplo de uso de estado en un componente de clase en React:** ```jsx import React, { Component } from 'react'; class Contador extends Component { constructor() { super(); this.state = { contador: 0 }; } incrementarContador() { this.setState({ contador: this.state.contador + 1 }); } render() { return (

Contador: {this.state.contador}

<button onClick={() => this.incrementarContador()}>Incrementar</button>
); } } ``` En este ejemplo, el componente `Contador` tiene un estado que incluye un valor llamado `contador`. Cuando el botón "Incrementar" se presiona, se llama al método `incrementarContador`, que actualiza el estado utilizando `this.setState`, lo que provoca una nueva representación del componente con el contador actualizado. El uso adecuado del estado es esencial para crear componentes React interactivos y dinámicos, ya que permite que los datos en la interfaz de usuario respondan a las acciones del usuario y a cambios en la lógica de la aplicación. \### Espero sea de utilidad. 👨‍💻

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!

Tengo este código para el Todo Button, pero me surgen las siguientes dudas: 1.- Porque debe ser let y no const. Si le cambio a const me marca un error de Assignment to constant variable 2.- Porque se incrementa después de 2 clics. Si doy 1 clic se actualiza el state pero tengo que darle 2 veces para que incremente a 1 ```js function TodoButton(){ let [state, setState] = React.useState(0); console.log('click '+state) return( <>

Diste {state} clicks

<button className = "TodoButton" onClick={() => { setState(state++) }}>+</button> ); } ```
Después de tanto tiempo por fin entiendo los estados , este profesor es genial . me encanta la manera y entiendo mucho con su metodología para explicar las cosas.
Finísimo todo un arte esa animación.

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();

Que buen docente, quedo bien claro con la ultima parte grafica dinaminca
Maravilloso, una explicación muy completa y con buena ciencia ficción para ser más prácticos. Felicitaciones, me gustó.
A nivel personal no me gusta que mi html tenga tanta lógica, es por ello que acostumbro usar funciones separadas de mi html y que son invocadas por los eventos asociados. Ejemplo. ```js ... const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { const toDoValue = e.target.value; setInputValue(toDoValue); if (toDoValue.length < 1) return; // console.log(e.target); }; ... ```y el html: \<input className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 p-2 w-full" type="text" placeholder="Qué quires buscar?" value={inputValue} onChange={handleInputChange} id="todo" /> ```js <input className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 p-2 w-full" type="text" placeholder="Qué quires buscar?" value={inputValue} onChange={handleInputChange} id="todo" /> ```
He visto muchos cursos y la verdad no había entendido react, este profesor es excelente. Por fin entendí esta vaina.

¿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>
    </>
  )
};
Dios les bendiga, muy crack la explicación del final, esto sí es una actualización de cursos, soy geek de tomar cursos online y no he visto a nadie que haga algo tan interactivo para explicar, y en especial para explicar un tema que puede ser un poco confuso como los hooks. Juan como siempre gran profe pero sumado a esas ayudas visuales woah esto es otra experiencia, gracias y espero que sigan así, genial el croma, genial muchas cosas pero esta parte final sí me dejó impresionado, es que ni los videos de youtube se esfuerzan tanto jajaja

¡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.

`useState` es uno de los hooks más fundamentales en React. Fue introducido en React 16.8 como parte de la API de hooks, que permite a los desarrolladores utilizar el estado y otras características de React en componentes funcionales. Aquí te explico para qué sirve `useState` y por qué es importante utilizarlo: ### ¿Para Qué Sirve `useState`? `useState` permite añadir estado a los componentes funcionales de React. El estado es una forma de almacenar datos que pueden cambiar a lo largo del tiempo y que, cuando cambian, provocan que el componente se vuelva a renderizar. ### ¿Por Qué Es Importante Utilizar `useState`? 1. **Componentes Funcionales**: * Antes de la introducción de los hooks, el estado solo podía ser manejado en componentes de clase. `useState` permite a los desarrolladores utilizar componentes funcionales para manejar el estado, lo que simplifica el código y mejora la legibilidad. 2. **Simplicidad y Claridad**: * Los componentes funcionales son generalmente más simples y fáciles de entender que los componentes de clase. Utilizar `useState` en componentes funcionales puede hacer que el código sea más claro y conciso. 3. **Reutilización de Lógica**: * Los hooks permiten extraer la lógica de estado en funciones reutilizables. Esto facilita la reutilización de código y la creación de componentes más modulares. 4. **Mejor Separación de Concerns**: * Al utilizar `useState`, puedes separar la lógica de estado de la lógica de renderizado, lo que mejora la organización del código y facilita el mantenimiento. 5. **Integración con Otros Hooks**: * `useState` se integra perfectamente con otros hooks de React, como `useEffect`, `useContext`, y `useReducer`, lo que permite manejar efectos secundarios, contexto y lógica de estado más compleja de manera eficiente.
El mejor profe de Platzi! me quedó súper claro la definición del DOM n.n El Virtual DOM es una representación ligera del DOM real que React utiliza para optimizar el rendimiento de las aplicaciones. Cada vez que cambia el estado de un componente, React actualiza el Virtual DOM en lugar del DOM real. Luego, compara el Virtual DOM con su versión anterior para identificar qué cambios son necesarios y solo actualiza esos elementos en el DOM real. Este proceso, conocido como "reconciliación", permite que las aplicaciones sean más rápidas y eficientes, evitando re-renderizados innecesarios de todo el DOM real.
Excelente curso, el profe Juan y sus explicaciones son simplemente increíbles y apoyado del material audiovisual y animaciones hacen que las explicaciones y el curso sean super dinámico, felicidades.
**STATE** *El **estado** en* **React.js** *es un **objeto** que **almacena datos** **dinámicos** **específicos** de un **componente**, permitiendo que este **responda** y se **re-renderice** **automáticamente** **cuando** **dichos** **datos** **cambian**. A **diferencia** de las **propiedades*** (props)*, que son **inmutables** y se **pasan** **desde** **componentes** **padres**, el **estado** es **mutable** y se **gestiona** **internamente** **dentro** del **componente**. El **estado** se **inicializa** en el **constructor** de un **componente** de **clase** o **mediante** el **hook** **useState** en **componentes** **funcionales**. Las **actualizaciones** del **estado** se **realizan** de manera **asíncrona** **utilizando** **métodos** **como** **setState** o la **función** de **actualización** **proporcionada** por **useState**. La **correcta** **gestión** del **estado** es **crucial** para **crear aplicaciones*** **React *interactivas*** *y **reactivas**, ya que **garantiza** que la **interfaz** de **usuario** siempre **refleje** el **estado** **actual** de los **datos**.*
Codigo con los comentarios *// Importa la librería React*import React from 'react'; *// Importa el archivo CSS que contiene los estilos para este componente*import './TodoSearch.css'; *// Define el componente funcional TodoSearch*function TodoSearch() {  *// Declara un estado llamado searchValue y una función para actualizarlo llamada setSearchValue*  *// Inicializa searchValue con una cadena vacía*  const \[searchValue, setSearchValue] = React.useState('');   *// Imprime en la consola el valor actual de searchValue cada vez que el componente se renderiza*  console.log('los usuarios buscan todos de ' + searchValue);   *// Retorna un input JSX que representa el campo de búsqueda*  return (    \<input      *// Establece un placeholder para el input*      placeholder='Escribe tu tarea pendiente'      *// Aplica la clase CSS para estilizar el input*      className="todo-search"      *// Vincula el valor del input al estado searchValue*      value={searchValue}      *// Define el manejador de eventos para el cambio en el input*      onChange={(*event*) => {        *// Actualiza el estado searchValue con el valor actual del input*        setSearchValue(*event*.target.value);      }}    />  );} *// Exporta el componente TodoSearch para que pueda ser utilizado en otros archivos*export { TodoSearch }; ```js // Importa la librería React import React from 'react'; // Importa el archivo CSS que contiene los estilos para este componente import './TodoSearch.css'; // Define el componente funcional TodoSearch function TodoSearch() { // Declara un estado llamado searchValue y una función para actualizarlo llamada setSearchValue // Inicializa searchValue con una cadena vacía const [searchValue, setSearchValue] = React.useState(''); // Imprime en la consola el valor actual de searchValue cada vez que el componente se renderiza console.log('los usuarios buscan todos de ' + searchValue); // Retorna un input JSX que representa el campo de búsqueda return ( <input // Establece un placeholder para el input placeholder='Escribe tu tarea pendiente' // Aplica la clase CSS para estilizar el input className="todo-search" // Vincula el valor del input al estado searchValue value={searchValue} // Define el manejador de eventos para el cambio en el input onChange={(event) => { // Actualiza el estado searchValue con el valor actual del input setSearchValue(event.target.value); }} /> ); } // Exporta el componente TodoSearch para que pueda ser utilizado en otros archivos export { TodoSearch }; ```
\### useState \> útil cuando se quiere actualizar un componente para que muestre la información actualizada. retorna un array donde se indica `\[0]` valor actual y `\[(newValue)=> useState\[0] = newValue]` valor siguiente y nos ayudamos de \[\[JavaScript#Destructuring|Array Destructuring]] para establecer dichos valores. ```jsx import './TodoSearch.css'; import React, { useState } from 'react'; function TodoSearch() {   const \[searchValue,setSearchValue] = useState("");// El argumento indica valor inicial o por defecto.   console.log(searchValue);   return (     \<input       placeholder="Cortar cebolla"       className="TodoSearch"       value={searchValue}       onChange={(event) => {         setSearchValue(event.target.value);       }}/>   ); } export { TodoSearch }; ```
```txt const [inputValue, setInputValue] = useState(""); const handleInputChange = (e) => { const toDoValue = e.target.value; setInputValue(toDoValue); if (toDoValue.length < 1) return; // console.log(e.target); }; ``` html: ```js <input className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 p-2 w-full" type="text" placeholder="Qué quires buscar?" value={inputValue} onChange={handleInputChange} id="todo" /> ``` \<input className="block rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 p-2 w-full" type="text" placeholder="Qué quires buscar?" value={inputValue} onChange={handleInputChange} id="todo" />
Hola, hice el ejercicio de TodoClick con el cambio de estado, pero presenta un bug: resulta que para que se pueda actualizar el contador toda darle click 2 veces en el contador, este es el código: import React from 'react' import './TodoClick.css' function TodoClick() { let \[state, setState] = React.useState(0); return ( \
\

Diste click \{state}\ \

\<button className='TodoClick\_\_button' onClick={ ()=>{ setState(state++) }}>Click me!\</button> \
) } export { TodoClick }; ```import React from 'react'import './TodoClick.css' function TodoClick() {    let \\\[state, setState] = React.useState(0);    return (        \\\
            \\\

                Diste click \\\{state}\\\            \\\

            \\\<button className='TodoClick\\\_\\\_button' onClick={ ()=>{                setState(state++)            }}>Click me!\\\</button>        \\\
            )} export {    TodoClick};````jsx import React from 'react' import './TodoClick.css' function TodoClick() { let [state, setState] = React.useState(0); return (

Diste click {state}

<button className='TodoClick__button' onClick={ ()=>{ setState(state++) }}>Click me!</button>
) } export { TodoClick }; ```import React from 'react'import './TodoClick.css' function TodoClick() { let \[state, setState] = React.useState(0); return ( \
\

Diste click \{state}\ \

\<button className='TodoClick\_\_button' onClick={ ()=>{ setState(state++) }}>Click me!\</button> \
)} export { TodoClick}; ````
```jsx import React from 'react' import './TodoClick.css' function TodoClick() { let [state, setState] = React.useState(0); return (

Diste click {state}

<button className='TodoClick__button' onClick={ ()=>{ setState(state++) }}>Click me!</button>
) } export { TodoClick }; ```import React from 'react'import './TodoClick.css' function TodoClick() {    let \[state, setState] = React.useState(0);    return (        \
            \

                Diste click \{state}\            \

            \<button className='TodoClick\_\_button' onClick={ ()=>{                setState(state++)            }}>Click me!\</button>        \
            )} export {    TodoClick};

Tremendas animaciones, son buenas para enterder mejor.