useState

 

useStateHook de reacción

El React useStateHook nos permite rastrear el estado en un componente de función.

El estado generalmente se refiere a datos o propiedades que deben rastrearse en una aplicación.

useStateacepta un estado inicial y devuelve dos valores:

El estado actual.

Una función que actualiza el estado.

El nuevo estado

import { useState } from "react";

function FavoriteColor() {

  const [color, setColor] = useState("Iniializaestado");

}

Inicializamos el estado con Iniializaestado

El primer valor, color es nuestro estado actual.

El segundo valor, setColores la función que se utiliza para actualizar nuestro estado.

Por último, establecemos el estado inicial en una cadena vacía:useState("")

Utilice la variable de estado en el componente renderizado.

import { useState } from "react";

import ReactDOM from "react-dom/client";

function FavoriteColor() {

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

  return <h1>My favorite color is {color}!</h1>

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<FavoriteColor />);

Estado de actualización

Para actualizar nuestro estado, utilizamos nuestra función de actualización de estado.

import ReactDOM from "react-dom/client";

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

root.render(<FavoriteColor />);

En React, cada vez que el estado de un componente cambia, el componente se vuelve a renderizar automáticamente. Esto significa que la función de renderización del componente se vuelve a llamar y la interfaz de usuario se actualiza para reflejar el nuevo estado.Por consiguiente cada vez que cambia useState el estado se vuelve a renderizar el componente.

Cuando utilizas el hook useState en un componente funcional de React para gestionar el estado, cada vez que llamas a la función de actualización devuelta por useState, React programa una re-renderización del componente.

Por ejemplo, considera el siguiente código:

import React, { useState } from 'react';

function MyComponent() {

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

  return (

    <div>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>

        Incrementar

      </button>

    </div>

  );

}

export default MyComponent;

En este componente, count es el estado y setCount es la función que utilizamos para actualizar ese estado. Cada vez que se hace clic en el botón "Incrementar", se llama a setCount con un nuevo valor para count. Esto provoca que React programe una re-renderización del componente, y la función de renderización (return (...)) se vuelve a ejecutar con el nuevo valor de count

Por lo tanto, en resumen, cada vez que el estado gestionado por useState cambia en un componente funcional de React, el componente se vuelve a renderizar para reflejar esos cambios en la interfaz de usuario.