🎣 ¿Qué son los React Hooks?

Ideas/conceptos claves

Hook.- Es una función especial que nos permite conectarnos a características de react, por lo tanto, podemos trabajar con métodos especiales que van a estar disponible [useState] sin depender de clases.

Apuntes

• Es una característica que salió en la versión 16.8 en febrero del 2019. Presentados en la react conf con anterioridad por Dan Abramov y Sophie Albert.
• Los hooks son una alternativa para trabajar con React.
• Son 100% con versiones anteriores
• Son opcionales en su implementación, pero vienen a cambiar la forma en la que estamos haciendo el desarrollo con React
• Vienen a resolver el problema de reutilizar la lógica del estado ⇒ Generando el Component Hell
• Vienen a dejar de lado las clases debido a que confunden tanto a las personas como al computador. Mejorando el proceso de aprendizaje de React

<aside> 📌 RESUMEN: Los hooks son funciones que nos permiten desarrollar la lógica de nuestros componentes sin depender de clases y evitar problemas de React como el Component Hell

</aside>

📌 useState

Ideas/conceptos claves

useState.- Es un hook es decir que engancha la funcionalidad del estado de React

Recursos

Usando el Hook de estado - React

Apuntes

• Estado en componentes creados como funciones
• useState es un Hook
• Lo llamamos dentro de un componente funcional para agregarle un estado local
• React mantendrá este estado entre re-renderizados
• useState devuelve un par: el valor de estado actual y una función que le permite actualizarlo
• Puedes llamar a esta función desde un controlador de eventos o desde otro lugar. Es similar a this.setState en una clase, excepto que no combina el estado antiguo y el nuevo.

Con clases

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Con Hooks

import React, { useState } from 'react';

function Example() {
  // Declaración de una variable de estado que llamaremos "count"
  const [count, setCount] = useState(0);

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

<aside> 📌 RESUMEN: El hook useState es una forma de crear un estado local para nuestros componentes funcionales. El cual retorna el valor actual y una función actualizadora los cuales llegan como un arreglo.

</aside>

⚡️ useEffect

Ideas/conceptos claves

useEffect.- El Hook de efecto te permite llevar a cabo efectos secundarios en componentes funcionales

Recursos

Usando el Hook de efecto - React

Apuntes

• Dejar de usar el ciclo de vida y pensar en efectos
• Nos permite manejar efectos los cuales serán transmitidos dentro de nuestros componentes
  • Trabajando lógica interna según sea el caso
• El Hook de efecto, useEffect, agrega la capacidad de realizar efectos secundarios desde un componente funcional.
• Tiene el mismo propósito que componentDidMount,componentDidUpdate y componentWillUnmount en las clases React, pero unificadas en una sola API.

Componente con clase

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

Componente con hooks

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar a componentDidMount y componentDidUpdate:
  useEffect(() => {
    // Actualiza el título del documento usando la Browser API
    document.title = `You clicked ${count} times`;
  });

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

<aside> 📌 RESUMEN: El hook de useEffect nos ayuda a trabajar con efectos secundarios y a remplazar componentDidMount,componentDidUpdate y componentWillUnmount lo que sería en componentes con clase

</aside>

🔌 useContext

Ideas/conceptos claves

useContext.- te permite suscribirte al contexto React sin introducir el anidamiento

Recursos

Referencia de la API de los Hooks - React

Apuntes

• Conecta todos tus componentes de una manera fácil con React
• Nos ayuda pasar la información entre componentes
• Conectar sin necesidad de pasar props y no estar ligados a pasar la información de padre a hijo

Ejemplo

import React from 'react'

const ThemeContext = React.createContext(null);
// Nos Devuelve un Provider que luego lo podemos
// usar para envolver nuestra aplicación

export default ThemeContext;

Usando el Provider:

import React from 'react';
import ReactDOM from 'react-dom';
import ThemeContext from './context/ThemeContext';

ReactDOM.render(
  <React.StrictMode>
    <ThemeContext.Provider value="blue">
      {/*Mi Aplicación*/}
    </ThemeContext.Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

• Este formato nos permite tener toda una lógica establecida con configuraciones que podemos transmitir a nuestra aplicación
• Se podría usar para tener todo un estado y compartirlo por todos los lugares según sea el caso y activarlo según el componente que nosotros necesitemos
  • Debido a que estamos pasando el valor en nuestro Provider
  • Logrando que nuestro contexto use esta información para recibir esta información y poderlo presentar a lo largo de nuestra aplicación

<aside> 📌 RESUMEN: useContext es un hook que nos permitirá acceder al contexto de nuestra aplicación de React

</aside>