useState: estado en componentes creados como funciones

React 17
Nota: desde la version 17 de React es opcional importar React en todos los componentes solo se importa una sola vez en todo el proyecto, este caso solo se importa en el archivo index.js, y solo se necesita importar lo que vamos a usar de la librería
Antes en cualquier componente

import React, {useState} from ‘react’;

Versión 17 de React

import {useState} from 'react’

• mas información acerca de esta versión

Para generar el componente con el atajo en VSCode me funciono “rafce + Tabulador”

Para el que todavia no tenga activado la escritura rapida en react les dejo lo siguiente
presionan ctrl + shift + P
dan clic en Preferences: Open Settings (JSON)
y agregan a la ultima linea del json lo siquiente

"emmet.includeLanguages": {
        "javascript": "javascriptreact"
    }```

useState

Te permite poder usar variables de estado dentro de componentes funcionales.

El Hook useState siempre nos retorna un array de dos posiciones. En la primera posición [0] vamos a tener el estado y él la segunda posición [1] vamos a tener la funciona para manipular el estado.

const [state, setState] = useState(0);

En este caso hacemos uso de la desestructuración del array una característica de ES6.

state ⇒ 0

setState ⇒ Función que actualiza el estado

Nuestro estado puede ser de los siguente tipos:

-String

-Boolean

-Number

-Float

-Null

-Undefined

-Object

-Array

useState: estado en componentes creados como funciones

Este Hook nos ayuda a manejar el estado en componentes creados como funciones

• Crear carpeta components
• Crear archivo Header.jsx
  • Instalar plugin

⠀
Header.jsx

// traemos useState al documento
import React, {useState} from 'react'

const Header = () => {
    /*
     * Integrar useState a esta logica
     * useState va a manejar este estado 
     * y haremos una función que cambia de Darmode a lightmode
     */

    /*
     * Constante que va a estructurar 2 elementos
     * el primero(darkMode) es el estado
     * el segundo(setDarkMode) es la función que cambiará al estado(darkMode)
     * de useState y lo pasamos como una función con estado inicial false
     */
    const [darkMode, setDarkMode] = useState(false);

    /*
     * Función para hacer los cambios de estado
     */
    const handleClick = () => {
        setDarkMode(!darkMode);
    };

		/*
     * Creamos el header con el logo 
     * y un boton para activar el DarkMode
     * dentro del boton ingresamos la logica para mostrar darkmode o lightMode
     */
    return (
        <div className="Header">
            <h1>React hooks</h1>
            <button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
            <button type="button" onClick={() => setDarkMode(!darkMode)}>{darkMode ? 'Dark Mode 2' : 'Light Mode 2'}</button>
        </div>
    )
}

export default Header

⠀
App.js

import './App.css';

// Importamos componente Header
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header />
      <h1>
        Hola Mundo
      </h1>
    </div>
  );
}

export default App;

Al enlazar el estado “Dark Mode” a la vista “Botón” a través de un manejador de eventos “handleClick” se está aplicando la arquitectura MVC y se está realizando un Two-way-data-binding?

tenia tiempo sin ver un curso de oscar 😄

useState es un Hook que te permite añadir el estado de React a un componente funcional.
Se debe importar de la siguiente manera

import { useState } from 'react'

Maneja una pareja de valores: el estado actual y una función que lo actualiza. Por eso escribimos en el ejemplo de la clase se escribe

const [darkMode, setDarkMode] = useState(false)

Siendo darkMode la variable que contiene el estado actual del componente y setDarkMode la función.
Dentro de useState() tenemos un parámetro que es el estado inicial.
Al contrario que en las clases, el estado no tiene por qué ser un objeto. Podemos usar números o strings si es todo lo que necesitamos.
En el caso particular de la clase, la función para cambiar nuestro estado será llamada dentro de un onClick que es un evento que dispara un trozo de código cada que un botón es presionado. Como se muesta en el siguiente snippet

<button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>

Y, el estado de nuestro componente será mostrado usando un operador ternario, que básicamente es un if-else reducido a una línea 😉

Mas chido aún, funciona digitando rfc - enter

<import React from 'react'

export default function Header2() {
    return (
        <div>
            
        </div>
    )
}
>

Yo escribí un artículo en la que explico (según mis conocimientos y lo que he ido aprendido) sobre useState, espero les guste
.
El artículo es el siguiente: https://dartiles.dev/blog/como-funciona-el-hook-usestate-y-como-usarlos-con-arrays-y-objetos
.

.
El blog está hecho con svelte, y lo hice gracias al curso de Oscar de sapper y svelte ❤

Esperaba mucho mas de esta clase, pense que hablarian mas de como funciona internamente useState que pasa con ese valor donde se almacena, como lo utiliza react, conocimientos mas profundos sobre el useState no solo para usarlo si no tambien entender que esta pasando mientras lo usamos, clase se tomo 5 minutos para crear un componente, este no es un curso basico y ya react tiene ese curso, me odiaran por el comentario pero me gustaria si vamos a hablar de useState nos centremos en el, no que nos tome tanto tiempo para de mas cosas.

Ojo aclaro todo este comentario es sin ofender a alguien, entiendo que hacer esto no es sencillo, pero es una critica constructiva para la clase.

Reglas de los Hooks

Los Hooks son funciones que necesitan seguir 2 reglas:

1. Posicionamiento en Top Level
   • Los Hooks no deben ser llamados dentro de ciclos, condiciones o funciones profundas.
   • El Hook deberá ser llamado en el nivel para vincularse al comportamiento del despliegue del componente, permitiendo retener el estado del hooks entre llamadas.
2. Dentro de Functions Declarations
   • Si el componente está declarado como clase, no podrá utilizar hooks. Ya que ocupa otro tipo de abstracción.

.

.

useState

💡 INFO
Retorna un valor, administrado por una función.

.

Definición

// function definition
const [state, setState] = useState(initialState);
// update state
setState(newState);
// use of state
<p>You clicked {state} times</p>

• Su primer despliegue, el valor del state es el declaro por initialState .
• La función setState es usada para actualizar el estado, llamándola se actualiza el estado y desplegando nuevamente al componente.

.

Consideraciones

El API de useState no permite abstraer su retorno mediante una referencia de un Array . Con el concepto de array destructuring podemos asignar nuevos valores referenciados a su valor de salida de la función.
.
Al declarar una variable de estado con useState , obtenemos un par de valores estructurados como Array .
.

⚠️ NOTE
Si en un proceso de actualización de estado del Hook, se asigna el mismo valor que que el actual, el componente no se actualizará para desplegarse de nuevo.

para iniciar componente, excelente
rfc = reactFuncionalComponent

resultado:

<import React from 'react'

export default function Header() {
    return (
        <div>
            
        </div>
    )
}
>

Yo también prefiero hacer la lógica con el handleClick por si después quiero agregarle más lógica al click.

a mi no me funciono el Shortcut “slr”

Este snippet me ayuda a tener la estructura del componente funcional.

React.useState:

1. import React, {useState} from ‘react’;
2. Crear const [uno, setUno] = useState(‘1’)
   1. Donde uno es la variable que modificara su estado, setUno es la función que modificara su estado al suceder X cosa, y ‘1’ es el valor inicial que tendrá esa variable
3. En el valor inicial o ‘1’ puede ir: bool, numero, string, objeto o array.
4. Manejando el evento de lo que modificara su estado o algún estado activaremos la función que recibirá el evento y activara la función setUno para modificar su valor, ej: setUno(‘2’)
5. Siempre que se recargue la pagina, el valor volverá a su valor inicial!
6. Para la función que activara la función setUno, la convención es llamarla “handleNOMBRE_DE_LA_VARIABLE”, ej: handleUno.
7. Código a tener en cuenta: al activar setToggle (!toggle), siempre modificara el valor que tiene toggle en ese momento pero a su inversa.

const [toggle, setToggle] = useState(false);

const handleToogle = () => {
setToggle(!toggle);
}

1. Si toggle es false no se mostrara, si toggle cambia a verdadero si lo mostrara, por el siguiente condicional:

   {toggle && <Menu/>}

si no econtraron slr es porque al parecer es un shorcut personal.
pero si existe

rafce (react arrow function component with es7 module system)
con este shorcut conseguimor imr + slr que hizo Oscar

con la extensión de ‘Auto Import’ ahorras el tiempo en buscar el componente, pues lo hace por ti.

Notan que ahora la cara de los profesores aparece todo el tiempo
Se nota que Platzi escucha las sugerencias de sus estudiantes

Así me gusta mas, es as limpio.

const handleDarkMode = () => {
  setDarkMode(!darkMode)
}
const darkModeClass =
  darkMode
    ? 'Dark Mode'
    : 'Light Mode'

return (
  <>
   <h1>ReactHooks</h1>
   <button
     type='button'
     onClick={handleDarkMode}
     >{darkModeClass}
   </button>
  </>
)

Les recomiendo esta extension (Error lens), si quieren ver estos mensajes de ayuda en el codigo

Código usado durante la clase:

import { useState } from 'react'

const Header = ()=>{
    const [darkMode, setDarkMode] = useState(false);

    const handleClick = ()=>{
        setDarkMode(!darkMode);
    }

    return (
        <div className="Header">
            <h1>ReactHooks</h1>
            <button type='button' onClick={handleClick}>{darkMode?'Dark Mode':'Light Mode'}</button>
        </div>
    );
};

export default Header;

Les comparto un video donde pueden revisar mas de este hook, y practicar ingles:
https://youtu.be/O6P86uwfdR0

Llamar a setDarkMode(!darkMode) es una mala práctica. Esto se debe a que setDarkMode es asincrónico, pero lo que eso realmente significa es que el estado de darkMode se difiere hasta que se vuelve a renderizar.
Lo correcto sería

  const handleClick = () => {
    setDarkMode((prevState) => !prevState);
  };

Cuando modificamos el estado, nunca deberiamos modificarlo directamente como muestra Oscar, sino por el contrario, crear una funcion anonima dentro del setState y que modifique indirectamente el estado previo. setState cuando se le pasa un parametro siempre va a recibir al estado. Un ejemplo asi queda mas claro:

	const [state, setState] = React.useState(false)

const toggleState = () => setState( prevState=> !prevState)

prevState recibe el state actual (false), y retorna implicitamente el estado anterior.

creo que es mejor usar useContext para usar el modo dark

Nota para los que tengan problemas con los snippets para React:
Algunos de los atajos de teclado han cambiado con el tiempo. Pueden ver una lista de todos los atajos presionando ctrl + alt + r en windows o Cmd + shift + r en mac.

Dejo mi aporte 😃

Oscar el .jsx es estrictamente necesario, o tu lo usas por costumbre?

Me gustaría aclarar este punto que menciono el profe Oscar

<button type="button" >Darkmode </button>

<button> por defecto utiliza " type=‘submit’ "
Cuando realicemos nuestros proyectos es importante declarar si se quiere un “submit” o un "button"
Para que en consola no esté apareciendo un mensaje “Warning” de React

No se si lo dijeron ya pero crear la funcion dentro del onclick es una mala practica por que cada vez que se renderice el componente se va a estar creando una funcion anonima en el stack. o sea que si el componete se renderiza 50 veces voy a tener 50 arrows anonimas creadas. Por eso siempre es mejor llamar la funciona con un nombre.

También podemos hacer:

setDarkMode(prev => !prev)

Aca la en la funcion que setea el nuevo estado podemos pasarle una funcion donde como primer parametro recibe el estado actual y retornará el estado nuevo.

Cabe destacar aquí que si tu próximo valor del estado depende del anterior, el hook de useState también recibe una función con el valor del estado anterior, el cual podrías utilizar para setear el siguiente. Es decir, adaptando el ejemplo de lo que nos explica el gran profe Oscar:

import React, {useState} from 'react'

const Header = () => {
    const [darkMode, setDarkMode] = useState(false);

    const handleClick = () => {
	/*
	 * En este caso estamos utilizando el valor anterior del estado y 
	 * seteando su valor contrario con el return de la funcion
	*/
    	setDarkMode(prevValue => {
				return !prevValue
	 		 });
    };

    return (
        <div className="Header">
            <h1>React hooks</h1>
            <button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
        </div>
    )
}

export default Header

Es más óptimo utilizar esta forma ya que evitas posibles errores en tiempo de ejecución.

Importante recordar que useState maneja no solo booleanos sino también strings, etc. Yo suelo pensarlo como una constante normal que puede tomar cualquier tipo de valor y se cambia por medio del set.

Si alguien usa vim y quiere usar los shrotcuts, lo que pueden hacer es instalar el plugin coc.nvim con el plugin hacen la instalacion de coc snippets
https://github.com/neoclide/coc-snippets
cuando lo tengan, abren un archivo de jsx y usan el comando :CocCommand snippets.editSnippets

Una vez en el archivo de configuracion, pueden copiar estos snippets que encontre en un repo de github
https://github.com/neoclide/coc-snippets/blob/master/tests/snippets/coffee-react.snippets
Y listo, tienen snippets

Los componentes de React por convención inician en mayúsculas.
Y para crear los templates de HTML debemos usar la extensión .jsx

un atajo para el useState:
useStateSnippet + Tab
Esto crea el estado

    const [first, setfirst] = useState(second)

Hubiera sido super ver la funcionalidad completa

exelente

Gente no me lo van a creer!!! 😱😱😱😱😱😱😱
https://youtu.be/klu3AK2lr_Q

a veces la parte de las importaciones se vuelve densa llena de muchas importaciones entonces se puede usar dentro del codigo asi

  const [count, setCount] = React.useState(0);

useState nos permite pasar como parámetro una arrow function en la cual podemos acceder al estado anterior y retornar el nuevo estado.
.
Por ejemplo, así esta como lo hizo Oscar:

handleClick = () => {
  setDarkMode(!darkMode)
}

Sin embargo, podemos acceder al valor actual y retornarlo por el nuevo valor de la siguiente manera

handleClick = () => {
  setDarkMode(darkMode => !darkMode)
}

Aunque puede parecer trivial, no lo es, ya que la segunda manera es mas recomendada. Cada vez que queremos modificar el estado existente, la mejor manera de hacerlo es la segunda. En caso de que queramos cambiar el estado a algo completamente nuevo, la primera forma es la mejor.

com imrs sale esto :import React, {useState} from ‘react’; si instalarte el plugin

Me gusta este curso, nada mejor que aprende haciendo proyectos

¡Que genial que hagan un curso de Hooks!

¡Que genial, es la extensión de VS Code que estaba precisando!

Este video me ayudo a repasar los hooks que se ven en el curso UWU

En lo personal a mi me parece mejor hacer una funcion en vez de colocar la logica en el boton, porque asi se puede separar y ver mejor, y en el template solo tienes los elementos de template y no logica compleja

Para poder usar los states, tenemos que importarlos: import React, { useState } from 'react'.

Dentro de ‘src’ creamos la carpeta ‘components’ y el archivo ‘Header.jsx’.

import React, { useState } from 'react'

/*useState lo usaremos para la lógica que cambia entre dark mode y light mode*/

const Header = () => {
  const [darkMode, setDarkMode] = useState(false) //*Valor inicial
  //* Variable, Función

  const handleClick = () => {
    setDarkMode(!darkMode); //*Toggle para cambiar su valor
  }

  return (
    <div className="Header">
      <h1>ReactHooks</h1>

      <button
        type="button"
        onClick={handleClick}
      >
        {darkMode ? 'Dark Mode' : 'Light Mode'}
      </button>

    </div>
  )
}

export default Header

Usamos el componente en App.js:

import './App.css';
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header />
      <h1>Hola mundo</h1>
    </div>
  );
}

export default App;

Y como resultado tendremos un botón que cambia de texto cuando le hacemos click.

“Header” suena más como “jedr” no “jidr”, la “ea” en este caso se dice como una “eh” como en “bed”.

sinceramente me gusta mas usar hook que class

Header.jsx

import React, { useState } from 'react'

const Header = () => {
    //Definición de variable y modificador 
    const [darkMode, setDarkMode] = useState(false);
    
    //Handler que al ser  ejecutada cambia el estado de la variable a su inverso 
    const handleClick = () => {
        setDarkMode(!darkMode);
    }

    return (
        <div className="Header">
            <h1>React Hooks</h1>
            {/* handleClick se ejecuta al presionar el botón, y
                según vaya cambiando el estado, mostrará una palabra u otra */}
            <button type="button" onClick={handleClick}>
                { darkMode ? 'DarkMode' : 'LightMode' }
            </button>
        </div>
    )
}

export default Header

Así es como yo entiendo el useState

En esta clase tenemos, const [darkMode, setDarkMode] = useState(false)

useState(false) es el valor inicial de darkMode, y cuando queramos cambiar el valor de darkMode, tenemos que invocar setDarkMode para actualizar a darkMode

si no te aparece el shortcut de slr es porque tienes que descargar otro plugin más, el cual es el siguiente >> https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux

Les comparto la documentación oficial para que puedan buscar un poco más profundo sobre useState en el siguiente link!

• Documentacion oficial de React, Hook useState

¿A que se refiere Oscar con “Destructurar” el estado?

Tengo una consulta, si tengo un formulario para registrar una empresa (por ejemplo) tendría que hacer un setValue para cada input? (SetNombre, setPais, setDireccion, setRepresentante… y así con todos los datos)??? Porque antes con un setState({ e. target. name: e. target. value}) era suficiente para meterlo a una funcion llamada handleChange y pasarle a todos los input. Ahora como podría manejarse el hook useState para formilarios grandes?

Hola de forma accidental elimine la barra de herramientas del lado del Vscode, como se vuelve a poner? muchas gracias.

Ese plugin de snippets para VSCode es oro 🤩

import React, { useState } from 'react';

export const Header = () => {
    const [ darkMode, setDarkMode ] = useState(false); 

    //==> Creating a function to handle the click of the button
    function handleClick() {
        setDarkMode(!darkMode);
    }

    return (
        <header>
            <h1>React Hooks</h1>
            <button type="button" onClick={ () => setDarkMode(!darkMode) } >{ darkMode ? 'Dark Mode' : 'Light Mode' }</button>
            <button type="button" onClick={ handleClick } >{ darkMode ? 'Dark Mode' : 'Light Mode' }</button>
        </header>
    )
}

useState nos ayuda a manejar el estado en componentes funcionales, algo que antes solo se podía hacer con componentes de clases…

la extensión “Reactjs code snippets” tiene shortCuts buenos

buen ejemplo de como comenzar con useState, muy claro profe,

Que bueno saber las dos formas de mandar a llamar a la función:

<button type="button" onClick={handleClick}>{darkMode ? 'Dark Mode' : 'Light Mode'}</button>
y 
 <button type="button" onClick={() => setDarkMode(!darkMode)}>{darkMode ? 'Dark Mode 2' : 'Light Mode 2'}</button>

Using the State Hook

no me deja correr en visual, ya descargue todos los archivos para empezar y no me da…

• Estado en componentes creados como funciones

• Nos sirve para utilizar los estados en componentes funcionales

• Para usarlo se importa useState de react

  • Creamos la variable y la “funcion para cambiar su valor” , adicional le asignamos el valor por defecto
    • const [isDarkMode, setIsDarkMode] = useState(false);
  • Para cambiar su valor usamos la funcion y le asignamos el valor deseado
    • setIsDarkMode(!isDarkMode);
  • Para usar su valor usamos el nombre de la variable
    • {isDarkMode ? "Dark Mode" : "Light Mode"}

Other feature of useState is that you can pass a callback to operate with the current state and return a new one. For example, I want to operate a state called count and I would like to increase, decrease and reset the state. Let’s do it.
.

import React, { useState } from 'react'

export default function HookCounter() {

	const initialCount = 0;
	const [count, setCount] = useState(initialCount);

	return (
		<div>
			Count : {count}
			<!-- I can pass a value as argument to set a new one -->
			<button onClick={() => setCount(initialCount)}>
				Reset
			</button>
		
			<!-- I can pass a callback to interact with the previous state  and return a new value -->
			<button onClick={() => setCount(prevCount => prevCount + 1)}>
				Increment
			</button>
		
			<button onClick={() => setCount(prevCount => prevCount - 1)}>
				Decrement
			</button>		
		</div>
	) 	  
}

.
Thanks

Muy interesante el reto.
Aca mi solucion

https://gifyu.com/image/Uvtm

Que significa destructurar un objeto? es que veo siempre que usan {} como en el caso de useState

Excelente clase… ahora todo tiene más sentido
Pd: minuto 11:19 useEsFake o useEffect jajaja

¿Se pierde el sonido al final de cada video?

Bastante, bastante entendible

Hola, voy a seguir este curso en NextJS, les dejo el repositorio de mi proyecto:

https://github.com/danyel117/platzi-conf-store

Excelente! Me encanta como explica Oscar, entiendo mejor ahora lo de setear el estado directamente 😃

m

Parece ser que en la versión 17 de React, ya no es necesario hacer el

import React from 'react'

.