¿Cómo usar useState en la función de flecha en lugar de gancho?

El gancho useState se usa para actualizar el estado en un componente React. Es un gancho que toma el estado inicial como argumento y devuelve una array de dos entradas. Se puede usar en un componente basado en la clase React, así como en un componente funcional (declarado usando la palabra clave function o const ). El componente funcional se carga antes de que se ejecute cualquier código, mientras que el componente const se carga solo cuando el intérprete llega a esa línea de código. Recuerde siempre que la representación de un componente funcional creado con sintaxis de función se puede hacer antes de que se defina en el código, mientras que si se define con const , debe declararse antes de usarlo. 

Los componentes funcionales constantes también se denominan funciones de flecha . Al usar estas funciones, podemos deshacernos del molesto método de encuadernación cada vez y podemos acceder a los ganchos muy fácilmente. 

Creando la aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

  cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: creamos una aplicación de función de flecha en la que configuramos un recuento de estado inicial con el valor de 10 y una función setCount para actualizar el valor de estado. Pasamos un evento onClick a nuestro componente de botón que actualiza el valor del estado cuando hacemos clic en él. Cuando la variable de estado necesita ser actualizada, se hace actualizando la variable de estado directamente dentro de setCount (como lo hemos hecho aquí en el componente de botón). Aprenderemos cómo hacer lo mismo con una función de actualización en nuestro próximo ejemplo.

import React, { useState } from 'react'
  
const App = () => {
  const [count, setCount] = useState(10);
  
  return (
    <div>
     <h1>Countdown Information</h1>
       
<p>You have clicked me {10 - count} times</p>
  
       
     <button onClick={() => setCount(count - 1)}>
        Please click me {count} more times.
     </button>
     </div>
  )
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo 2: creamos dos funciones aumentarContador y disminuirContador que incrementan y decrementan el valor del estado en 1 respectivamente. Ambas funciones se activan con el evento onClick y el valor del estado se actualiza. Tenga en cuenta que creamos dos funciones de actualización y las pasamos como controladores de eventos en nuestros componentes de botón, lo que simplemente significa cómo podemos usar useState en una función de flecha de diferentes maneras.

import React, { useState } from 'react'
  
const App = () => {
  const [count, setCount] = useState(0);
    
  const increaseCount = () => {
    setCount(count + 1);
  }
  const decreaseCount = () => {
    setCount(count - 1); 
  }
    
  return (
    <div>
     <h1>Countdown Information</h1>
       
<p>Value is {count}</p>
  
       
     <button onClick={increaseCount}>
        Increment 
     </button>
  
     <button onClick={decreaseCount}>
        Decrement
     </button>
     </div>
  )
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: