¿Qué es useState() en React?

Si encuentras algún detalle que te causa duda puedes dejarlo en los comentarios y te responderemos lo mas rápido que podamos.

Solución:

Los ganchos de reacción son una nueva forma (aún en desarrollo) de acceder a las características principales de reaccionar, como state sin tener que usar clases, en su ejemplo, si desea incrementar un contador directamente en la función del controlador sin especificarlo directamente en el onClick prop, podrías hacer algo como:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => 
    setCounter(count + 1);
    setMoreStuff(...);
    ...
;

y al hacer clic:

    Click me

Expliquemos rápidamente lo que está pasando en esta línea:

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

useState(0) devuelve una tupla donde el primer parámetro count es el estado actual del contador y setCounter es el método que nos permitirá actualizar el estado del contador. Podemos usar el setCounter método para actualizar el estado de count en cualquier lugar: en este caso, lo estamos usando dentro del setCount función donde podemos hacer más cosas; la idea con los ganchos es que podemos mantener nuestro código más funcional y evitar componentes basados ​​en clases si no se desea/necesita.

Escribí un artículo completo sobre ganchos con múltiples ejemplos (incluidos contadores) como este codepen, hice uso de useState, useEffect, useContexty ganchos personalizados. Podría entrar en más detalles sobre cómo funcionan los ganchos en esta respuesta, pero la documentación hace un muy buen trabajo al explicar el gancho de estado y otros ganchos en detalle, espero que ayude.

actualizar: Los ganchos ya no son una propuesta, ya que la versión 16.8 ahora están disponibles para usarse, hay una sección en el sitio de React que responde algunas de las preguntas frecuentes.

useState es uno de los ganchos de reacción incorporados disponibles en 0.16.7 versión.

useState debe usarse solo dentro de componentes funcionales. useState es el camino si necesitamos un estado interno y no necesitamos implementar una lógica más compleja, como los métodos de ciclo de vida.

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

Devuelve un valor con estado y una función para actualizarlo.

Durante la representación inicial, el estado devuelto (estado) es el mismo que el valor pasado como primer argumento (estado inicial).

La función setState se utiliza para actualizar el estado. Acepta un nuevo valor de estado y pone en cola una nueva representación del componente.

tenga en cuenta que useState gancho de devolución de llamada para actualizar el estado se comporta de manera diferente que los componentes this.setState. Para mostrarte la diferencia preparé dos ejemplos.

class UserInfoClass extends React.Component 
  state =  firstName: 'John', lastName: 'Doe' ;
  
  render() 
    return 

      
userInfo: JSON.stringify(this.state)
       this.setState( 
        firstName: 'Jason'
      )>Update name to Jason
    
;
  


// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() 
  const [userInfo, setUserInfo] = React.useState( 
    firstName: 'John', lastName: 'Doe',
  );

  return (
    

      
userInfo: JSON.stringify(userInfo)





       setUserInfo( firstName: 'Jason' )>Update name to Jason
    
  );


ReactDOM.render(
  

    
    
  
, document.querySelector('#app'));

Se crea un nuevo objeto cuando setUserInfo se utiliza la devolución de llamada. Aviso que perdimos lastName key valor. Para arreglar que podríamos pasar la función dentro useState.

setUserInfo(prevState => ( ...prevState, firstName: 'Jason' )

Ver ejemplo:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() 
  const [userInfo, setUserInfo] = React.useState( 
    firstName: 'John', lastName: 'Doe',
  );

  return (
    

      
userInfo: JSON.stringify(userInfo)
       setUserInfo(prevState => (
        ...prevState, firstName: 'Jason' ))>
        Update name to Jason
      
    
  );


ReactDOM.render(
    
, document.querySelector('#app'));

A diferencia del método setState que se encuentra en los componentes de clase, useState no fusiona automáticamente los objetos de actualización. Puede replicar este comportamiento combinando el formulario de actualización de funciones con la sintaxis de distribución de objetos:

setState(prevState => 
  // Object.assign would also work
  return ...prevState, ...updatedValues;
);

Para más información useState ver documentación oficial.

la sintaxis de useState gancho es sencillo.

const [value, setValue] = useState(defaultValue)

Si no está familiarizado con esta sintaxis, vaya aquí.

Le recomendaría que lea la documentación. Hay excelentes explicaciones con una cantidad decente de ejemplos.

import  useState  from 'react';

function Example() 
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => 
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  
  

  return (
       

          
You clicked count times
         
             Click me
         
      
   );
 

Comentarios y puntuaciones de la guía

Finalizando este artículo puedes encontrar las notas de otros sys admins, tú igualmente puedes insertar el tuyo si lo crees conveniente.

---

---

Utiliza Nuestro Buscador