Engánchate a los React Hooks

Engánchate a los

React Hooks

Engánchate a los

React Hooks

Miguel Ángel Durán

@midudev

youtube/c/midudev

Engánchate a los

React Hooks

soy
Enabler Frontend en

...

Engánchate a los

React Hooks

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

2. ¿Por qué molan tanto?

3. Show me the code!

4. Preguntas y... ¡nos vamos a comer!

🤔↩️

🤩

👨‍💻

🙋‍♀️

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

Engánchate a los

React Hooks

✅

react >= 16.8.0

1. ¿Qué son los React Hooks?

Engánchate a los

React Hooks

↩️

funciones que nos permiten acceder a ~~todas~~ casi todas las características de React desde componentes funcionales

1. ¿Qué son los React Hooks?

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

y no sólo state! 🤪

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

useState

useEffect

useContext

Básicos ⭐

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

🛒 Adicionales

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

casi todas las funcionalidades

getSnapshotBeforeUpdate

componentDidCatch

Engánchate a los

React Hooks

1. ¿Qué son los React Hooks?

¿Y cómo se usan?

import React, { Component } from "react";

export default class Counter extends Component {
  state = { counter: 0 }

  render() {
    const { counter } = this.state

    return (
      <div>
        <span>{counter}</span>
        <button
          onClick={() => this.setState({ counter: counter + 1 })}
        >
          +
        </button>
        <button
          onClick={() => this.setState({ counter: counter - 1 })}
        >
          -
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react'

export default function Counter () {
  const [counter, setCount] = useState(0)

  return (
    <div>
      <span>{counter}</span>
      <button onClick={() => setCount(counter + 1)}>+</button>
      <button onClick={() => setCount(counter - 1)}>-</button>
    </div>
  )
}

import React, { Component } from "react";

export default class Counter extends Component {
  state = { counter: 0 }

  render() {
    const { counter } = this.state

    return (
      <div>
        <span>{counter}</span>
        <button
          onClick={() => this.setState({ counter: counter + 1 })}
        >
          +
        </button>
        <button
          onClick={() => this.setState({ counter: counter - 1 })}
        >
          -
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react'

export default function Counter () {
  const [counter, setCount] = useState(0)

  return (
    <div>
      <span>{counter}</span>
      <button onClick={() => setCount(counter + 1)}>+</button>
      <button onClick={() => setCount(counter - 1)}>-</button>
    </div>
  )
}

¿No te parecen suficientes hooks?

useState

useEffect

useContext

Básicos ⭐

useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

🛒 Adicionales

Custom Hooks
crea tu propio hook

Engánchate a los

React Hooks

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

100% retrocompatibles

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

transpilan mejor que las clases

2. ¿Por qué molan tanto?

import React, { Component } from "react";

export default class Counter extends Component {
  state = { counter: 0 }

  render() {
    const { counter } = this.state

    return (
      <div>
        <span>{counter}</span>
        <button
          onClick={() => this.setState({ counter: counter + 1 })}
        >
          +
        </button>
        <button
          onClick={() => this.setState({ counter: counter - 1 })}
        >
          -
        </button>
      </div>
    );
  }
}

import React, { useState } from 'react'

export default function Counter () {
  const [counter, setCount] = useState(0)

  return (
    <div>
      <span>{counter}</span>
      <button onClick={() => setCount(counter + 1)}>+</button>
      <button onClick={() => setCount(counter - 1)}>-</button>
    </div>
  )
}

Engánchate a los

React Hooks

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

mejor separación de conceptos

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

2. ¿Por qué molan tanto?

Engánchate a los

React Hooks

reutilización de la lógica

2. ¿Por qué molan tanto?

mixins
HoC
Render Props

useYourImagination()

function useInputValue(initialValue) {
  let [value, setValue] = useState(initialValue);
  let onChange = useCallback(function(event) {
    setValue(event.currentTarget.value);
  }, []);

  return {
    value,
    onChange,
  };
}

Engánchate a los

React Hooks

3. Show me the code!

Engánchate a los

React Hooks

3. SHOW ME THE CODE

useState()

Engánchate a los

React Hooks

3. SHOW ME THE CODE

useEffect + customHook

Engánchate a los

React Hooks

3. SHOW ME THE CODE

useEffect + customHook

Engánchate a los

React Hooks

3. SHOW ME THE CODE

useContext()

Engánchate a los

React Hooks

3. SHOW ME THE CODE

useReducer()

Engánchate a los

React Hooks

¡Antes de irnos!

Una cosa más...

Engánchate a los

React Hooks

LOS MANDAMIENTOS DE LOS HOOKS

Engánchate a los

React Hooks

Sólo llama a los hooks en la raíz del componente funcional

Engánchate a los

React Hooks

function Form ({name}) {
    // 🔴 ESTO ESTÁ MAL!
    if (name !== '') {
      useEffect(function persistForm() {
        localStorage.setItem('formData', name)
      })
    }
    
    // 👍 esto sí que le mola!
    useEffect(function persistForm() {
      if (name !== '') {
        localStorage.setItem('formData', name)
      }
    })

   //..
}

Engánchate a los

React Hooks

4. Preguntas y... ¡nos vamos a comer!

youtube/c/midudev

Engánchate a los

React Hooks

4. Preguntas y... ¡nos vamos a comer!

🔗 midu.dev

Engánchate a los

React Hooks

4. Preguntas y... ¡nos vamos a comer!

@midudev

youtube/c/midudev