REACT-Hooks-useState y useEffect

-

 Cómo usar el Hook useState

Para que un componente funcional tenga estado propio podemos hacer uso del hook useState.

Importar useState:

import React, { useState } from 'react';

useState() es una función que crea internamente una variable donde podremos almacenar el estado de nuestro componente. Acepta un valor inicial para esa variable y devuelve un array con dos elementos, el valor de la variable y la función para modificarla.


function FavoriteColor() {

  const [valordelavariable, funciónparamodificarla] = useState(valor inicial);

}

Es otra manera de definir la función::

const FavoriteColor = () =>{

  const [valordelavariable, funciónparamodificarla] = useState(valor inicial);

}

Como el valor devuelto por la función es un array, podemos descomponerlo para acceder a sus elementos de manera individual.

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

const FavoriteColor = () =>{

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

}


Aquí tienes un ejemplo práctico:

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}
const root = ReactDOM.createRoot(document.getElementById('favoriteColor'));
root.render(<FavoriteColor />);







Cómo usar el Hook useEffect

import React, { useEffect } from 'react';

Este hook normalmente es usado para la inicialización de variables, llamadas a APIs o para limpiar un componente antes de desmontarlo del DOM.

Es el equivalente funcional a componentDidMount, componentDidUpdate, y componentWillUnmount en los componentes de clase.

La llamada a useEffect acepta una función como argumento. Esta función se ejecuta por defecto cuando el componente se renderiza por primera vez, y después cada vez que el componente se actualice.


Ejemplo:



También es posible especificar cuándo se debe ejecutar esta función con un segundo argumento opcional que le podemos pasar.

Para ello basta con añadir un segundo parámetro a la función, con la lista de los elementos de los que depende. Si el valor de uno de estos elementos que hemos indicado cambia, la función se va a ejecutar con la siguiente actualización.



Otra posibilidad que nos permite este hook es la de especificar que se ejecute sólo una vez. Esto resulta muy útil si sólo queremos hacer una llamada AJAX para rellenar el estado de la aplicación.



A veces, hacemos uso de recursos que pueden quedar a medias cuando el componente se desmonta del DOM, para hacer “limpieza” de los recursos de un componente podemos especificarlo devolviendo una función en useEffect:



Fuente::

Comentarios

Publicar un comentario

Entradas populares de este blog

reloj obs---datetime.lua

-
Imagen
  Como agregar un reloj a obs Como colocamos un reloj en obs. Primero descargamos el script datetime.lua del siguiente link:: https://obsproject.com/forum/resources/datetime-digital-clock.882/ Lo situamos en la carpeta de script de obs, la cual se encuentra en la siguiente ruta C:\Program Files\obs-studio\data\obs-plugins\frontend-tools\scripts   Lo siguiente es quitar la extencion .txt y dejar solo la lua en el script. Después de ello ingresamos a obs, creamos una etiqueta texto y la enlazamos con el escript. Para ello vamos a herramientas, script. Seleccionamos el script que descargamos y lo enlazamos con la etiqueta que creamos. Fin. 1-Agregamos una etiqueta texto y la llamamos reloj:: 1-1 1-2 1-3 2-Descargamos el scripts datetime.lua 2-1 2-2 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-3 :El script se descargara con la extensión txt la cual debemos eliminar para que solo que de la extensión .lua 2-4::Si tu...
Leer más

10 videojuegos gratis para aprender JavaScript en línea

-
Imagen
  JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente para agregar funcionalidades interactivas a las páginas web. Es uno de los lenguajes de programación más populares y ampliamente utilizados en la actualidad, y se ejecuta en el lado del cliente (es decir, en el navegador web del usuario). JavaScript se utiliza para crear efectos dinámicos en las páginas web, como animaciones, formularios interactivos, menús desplegables, y mucho más. Además, también se puede utilizar para crear aplicaciones web completas y para trabajar con bases de datos y servidores web. En resumen, JavaScript es un lenguaje de programación esencial para cualquier desarrollador web que desee crear sitios y aplicaciones interactivas y dinámicas. Es posible aprender JavaScript jugando videojuegos. Existen muchos juegos educativos y plataformas de aprendizaje en línea que utilizan el lenguaje JavaScript para enseñar programación de manera divertida e interactiva. Estos juegos sue...
Leer más

Filtrando por fecha

-
Cuando realizamos consultas a la base de datos haciendo uso de Eloquent, generalmente hacemos uso de las “Where Clauses” para de manera sencilla obtener información según ciertos parámetros,    por lo que haremos uso de dicha característica del ORM para ejemplificar el post del día de hoy. Ejemplos: Supongamos que desea filtrar las entradas creadas hoy, o cualquier otro día, podemos hacer lo siguiente: He visto gente haciéndolo con consultas sin procesar , como esta: $q->where(DB::raw("DATE(created_at) = '".date('Ymd')."'")); O sin consultas sin procesar por fecha y hora, así: $q->where('created_at', '>=', date('Ymd').' 00:00:00')); Afortunadamente, Laravel Query Builder ofrece una solución más elocuente : $q->whereDate('created_at', '=', date('Ymd')); En lugar de PHP date() puedes usar Carbon : $q->whereDate('created_at', '=', Carbon::today()-...
Leer más