Cómo utilizar el gancho useState React

Descubra para qué es útil el gancho useState React y cómo trabajar con él.

Echa un vistazo a miIntroducción a React Hooksprimero, si eres nuevo en ellos.

Un gancho de React que uso con más frecuencia esuseState.

import React, { useState } from 'react'

Utilizando lauseState()API, puede crear una nueva variable de estado y tener una forma de modificarla.useState()acepta el valor inicial del elemento de estado y devuelve una matriz que contiene la variable de estado y la función que llama para alterar el estado. Como devuelve una matriz, usamosdesestructuración de matricespara acceder a cada elemento individual, así:const [count, setCount] = useState(0)

He aquí un ejemplo práctico:

import { useState } from 'react'

const Counter = () => { const [count, setCount] = useState(0)

return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

Puedes agregar tantosuseState()llamadas que desee, para crear tantas variables de estado como desee. Solo asegúrese de llamarlo en el nivel superior de un componente (no en unifo en cualquier otro bloque).

Ejemplo en Codepen:

Ver la plumaReact Hooks ejemplo # 1 contadorpor Flavio Copes (@flaviocopios) enCodePen.

Tech Wiki Online!