React Hooks
¿Por que estoy tan feliz con ellos?
Sergio Marin
@highercomve
¿Quien soy?
Mi nombre es Sergio Marin y soy un desarrollador web como tu.
Software Engineer
Que problemas busca solventar los Hooks
¿Que problemas busca solventar los Hooks?
-
Habilidad de compartir codigo
- Dificil compartir codigo entre componentes, por lo general resuelto por: Higher Order Components y Render Props
-
Componentes Gigantes
- Demasiado boiler plate en general
- Demasiada logica externa al componente en el componente
- Componentes como Clases pueden ser confusos
class App extends React.Component {
constructor (props) {
super(props)
this.state = { counter: 0 }
this.counterHandler = this.counterHandler.bind(this)
}
counterHandler(event) {
event.preventDefault()
const step = Number(event.target.dataset.amount || 0)
this.setState((state, props) => {
return { counter: state.counter + step }
})
}
render () {
return (
<div>
{this.state.counter}
<br/>
<button data-amount="1" onClick={this.counterHandler}>
Add
</button>
<button data-amount="-1" onClick={this.counterHandler}>
Remove
</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
Cierto, pero dentro de lo simple.
¿Que pasa si la logica de estados que esta ahi la quiero combertir en una libreria?
¿Como compartiria esa logica de estado entre dos componentes?
¿Que pasa si el estado depende de un evento como el cambio del ancho de la pantalla?
¿O si al cambiar dicho estado necesito realizar un efecto en localStorage, cache, servicio, etc?
Hooks
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
function App (props) {
const [count, setCount] = useState(0)
const counterHandler = (event) => {
event.preventDefault()
const step = Number(event.target.dataset.amount || 0)
setCount(count + step)
}
return (
<div>
{this.state.counter}
<br />
<button data-amount='1' onClick={counterHandler}>
Add
</button>
<button data-amount='-1' onClick={counterHandler}>
Remove
</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
Hooks disponibles
Pero no vine a hablar de esos
Custom Hooks!
y no me dio tiempo de agregar mas cosas a la presentacion
React Hooks
By Sergio Marin
