Primeros pasos en React (parte 3 de 3)

En este artículo vamos a seguir aprendiendo lo que son los hooks y sus 3 tipos básicos. En el artículo anterior aprendimos los componentes básicos como son las propiedades (props), estados (states), y el manejo de eventos.

Hooks

Los Hooks son una nueva característica de React introducida en la versión 16.8, son funciones JavaScript que permiten crear, acceder a estados y a los ciclos de vida de React. Deben ser llamados en el nivel superior de la aplicación y además se deben llamarse en funciones de React.

Finalmente, los hooks simplifican la lógica actual de la manera de utilizar React, reduciendo el número de conceptos en el desarrollo de aplicaciones evitando las mutaciones.

Existen 3 hooks básicos de estado, de efecto y de contexto.

Hook useState

Nos devuelve un valor con un esto mantenido y una función que es necesaria para actualizar al valor. En nuestro ejemplo de /src/Test.js vamos a iniciar una constante con un valor y la vamos a actualizar en el llamado del botón. Pero antes vamos a configurar el componente para que pueda ser utilizado con los componentes funcionales, en este caso eliminamos la clase y transformamos a funciones flecha.

import React, {useState} from 'react'

const TestBody = (props) => {
  const content = props.names.name.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

const Test = (props) => {
  const [names, setNames] = useState(props.names);
  const [test, setTest] = useState(0);
  const submitForm = (event) => {
    //actulizamos el valor test sumado 1
    setTest(test => test + 1);
    alert(`Aumenta ${test}`);
  }
  
  return (
    <>
      <TestBody names={names}/>
      <input type="button" value="Submit" onClick={submitForm} />
    </>
      
  )

}

export default Test

El estado inicial es el parámetro pasado a useState, en este caso 0, y será el estado del que dispondrá durante al menos el render inicial y hasta que sea llamada la función setTest. Para nuestro caso vamos utilizar el valor del estado anterior dentro de la propia función de establecimiento del estado, de esta forma quedaría en la función submitForm actualizamos valor a setTest(test => test + 1). Código Completo: hooks

Hook useEffect

Nos permite realizar modificaciones a la lógica una vez se haya realizado el renderizado. En nuestro ejemplo de /src/Test.js vamos a iniciar una constante con un valor y la vamos a actualizar en el llamado del botón y el efecto va a cambiar el título de la página a mostrar cada vez que el valor se actualiza.

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

const TestBody = (props) => {
  const content = props.names.name.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

const Test = (props) => {
  const [names, setNames] = useState(props.names);
  const [test, setTest] = useState(0);
  const submitForm = (event) => {
    //actulizamos el valor test sumado 1
    setTest(test => test + 1);
    alert(`Aumenta ${test}`);
  }
  useEffect(() => {
    // Actualiza el título del documento usando la API del navegador
    document.title = `You clicked ${test} times`;
  });
  return (
    <>
      <TestBody names={names}/>
      <input type="button" value="Submit" onClick={submitForm} />
    </>
      
  )

}

export default Test

Al usar este Hook, le indicamos a React que el componente tiene que hacer algo después de renderizarse. React recordará la función que le hemos pasado, y la llamará más tarde después de actualizar el DOM. En este efecto, actualizamos el título del documento, pero también podríamos hacer peticiones de datos. Puedes indicarle a React que omita aplicar un efecto si ciertos valores no han cambiado entre renderizados. Para hacerlo, pasa un array como segundo argumento opcional a useEffect:

useEffect(() => {
  document.title = `You clicked ${test} times`;
}, [test]); // Solo se vuelve a ejecutar si la constante test cambia`

Código Completo: hooks

Hook useContext

Un contexto en React es una forma de pasar datos entre diferentes componentes sin necesidad de realizar una cascada manual de props.

En nuestro ejemplo vamos a enviar un arreglo que tiene información name. En primer lugar, vamos a crear un archivo con el nombre /src/AuthContext.js

import { createContext } from 'react';
export const AuthContext = createContext();

En nuestro archivo /src/AppTest.js vamos a importar el archivo context que vamos a utilizar para enviar nuestro contenido.

import React, {Component} from 'react'
import './App.css';
import Test from './Test';
import { AuthContext } from './AuthContext';

class AppTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
        name:[
            {name: 'pedro', lastName: 'perez'}
        ]
    }

  }

  render() {
  
    const name =this.state
    return (
      <AuthContext.Provider value={name}>
        <Test names={name} />
      </AuthContext.Provider>
    )
  }
}

export default AppTest;

Y en nuestro archivo /src/Test.js vamos a obtener la información del contexto

import React, {useState, useEffect, useContext} from 'react';
import { AuthContext } from './AuthContext';

const TestBody = (props) => {
  const content = props.names.name.map((index)=>{
    return <h1> Hola {index.name} {index.lastName}</h1>
  });
  return(
      <>
          {content}
      </>
  )
}

const Test = (props) => {
  const [names, setNames] = useState(useContext(AuthContext));
  const [test, setTest] = useState(0);
  const submitForm = (event) => {
    //actulizamos el valor test sumado 1
    setTest(test => test + 1);
    alert(`Aumenta ${test}`);
  }
  useEffect(() => {
    // Actualiza el título del documento usando la API del navegador
    document.title = `You clicked ${test} times`;
  });
  return (
    <>
      <TestBody names={names}/>
      <input type="button" value="Submit" onClick={submitForm} />
    </>
      
  )

}

export default Test

Código Completo: hooks-context

Finalmente, React también posee hooks adicionales que están orientados a optimizar el flujo de renderizado cuya finalidad es memorizar funciones, componentes y componentes funcionales para no renderizarlos inútilmente si ninguna de sus dependencias ha cambiado.