Usando los Hooks de efecto y estado en componentes ReactJS declarados como funciones

En muchas ocasiones cuando en nuestro proyecto ReactJS declaramos un componente lo que hacemos es definir una clase que herede del React.Componet para poder reutilizar los métodos definidos en esta clase para facilitar el ciclo de vida del componente. Quedando definido generalmente una estructura como la que se muestra en el siguiente ejemplo:

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>
    );
  }
}

En este ejemplo la variable this.state controla los estados del componente donde estos se pueden modificar mediante el método this.setState(). Otra de las oportunidades que nos brinda esta forma de declaración del componente es el acceso a los métodos de control del ciclo de vida de un componente como son componentDidMount() y componentDidUpdate() entre otros, que se pueden heredar para ejecutar funcionalidades por ejemplo después de renderizar un componente o antes de destruirlo.

Esta forma nos ayuda en el desarrollo por solamente debemos heredar los métodos y programar nuestro componente, pero no siempre es la más optima a la hora de escalar un proyecto de React complejo que contenga muchos componentes.

Para optimizar la renderización de un componente se puede definir este como una función de la forma:

let Example = (props) => {
return (
    <div></div>
  );
}

Ahora bien entonces surge la interrogante ¿Cómo se manejarían los estados y el ciclo de vida de un componente declarado como función?

La respuesta de la interrogante esta basada en el uso de los Hooks de efecto y estado: useState y useEffect, veremos en el siguiente ejemplo como se puede definir:

let Example= (props) => {
  const [count, setCount] = useState(0);

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

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

const [count, setCount] = useState(0); : En este ejemplo se esta definiendo el state count con valor inicial 0 y también la función autorizada para cambiar el estado como se puede observar en la línea :

<button onClick={() => setCount(count + 1)}>

useEffect(() => {
// Actualiza el título del documento usando la API del navegador
document.title = You clicked ${count} times;
}); : En este ejemplo se define el hooks para ejecutar código al renderizar el componente y también durante el proceso de actualización

Nota:

Si estás familiarizado con el ciclo de vida de las clases de React y sus métodos, el HookuseEffect equivale a componentDidMountcomponentDidUpdate y componentWillUnmount combinados.

Si estás familiarizado con el ciclo de vida de las clases de React y sus métodos, el HookuseEffect equivale a componentDidMountcomponentDidUpdate y componentWillUnmount combinados.

Si estás familiarizado con el ciclo de vida de las clases de React y sus métodos, el HookuseEffect equivale a componentDidMountcomponentDidUpdate y componentWillUnmount combinados.

¿Qué hace useEffect? 

Al usar este Hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse. React recordará la función que le hemos pasado (nos referiremos a ella como nuestro “efecto”), 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 o invocar alguna API imperativa.

¿Por qué se llama a useEffect dentro del componente? 

Poner useEffect dentro del componente nos permite acceder a la variable de estado count (o a cualquier prop) directamente desde el efecto. No necesitamos una API especial para acceder a ella, ya que se encuentra en el ámbito de la función. Los Hooks aprovechan los closures de JavaScript y evitan introducir APIs específicas de React donde JavaScript ya proporciona una solución.

¿Se ejecuta useEffect después de cada renderizado? 

¡Sí! Por defecto se ejecuta después del primer renderizado y después de cada actualización. En vez de pensar en términos de “montar” y “actualizar”, puede resultarte más fácil pensar en efectos que ocurren “después del renderizado”. React se asegura de que el DOM se ha actualizado antes de llevar a cabo el efecto.

Nota:
A diferencia de componentDidMount o componentDidUpdate, los efectos planificados con useEffect no bloquean la actualización de la pantalla del navegador. Esto hace que tu aplicación responda mejor. La mayoría de efectos no necesitan suceder de manera síncrona. En los casos poco comunes en los que se necesita una ejecución síncrona (como en mediciones de la disposición de elementos), podemos usar el Hook useLayoutEffect con una API idéntica a la de useEffect.

Un comentario en «Usando los Hooks de efecto y estado en componentes ReactJS declarados como funciones»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

SACAViX Tech