En publicaciones pasadas conocimos los hooks useState y useEffect, cómo funcionan y cómo podemos utilizarlos en nuestros proyectos. En esta ocasión conoceremos el hook useRef y cómo este hook nos ofrece características interesantes.

<br />

En la documentación de React podemos encontrar la siguiente definición *“useRef devuelve un objeto ref mutable cuya propiedad .current se inicializa con el argumento pasado (initialValue). El objeto devuelto se mantendrá persistente durante la vida completa del componente.”*

<br />

De ese concepto podemos tomar varias cosas que nos permiten conocer cómo se usa el hook. En primer lugar tenemos que recibe un argumento, este argumento no es obligatorio, y su valor será el que tendrá la propiedad current del objeto creado. El objeto persiste durante todo el ciclo de vida de nuestro componente. Este hook tiene dos usos principales: ser un medio de acceso al DOM y mantener una variable mutable. Más adelante hablaré sobre cada caso. 

<br />

## **Importación**

<br />

Este hook, lo podemos obtener desde react de la siguiente forma:

<br />

```js
import { useRef } from 'react';
```

<br />

Como podemos ver, su importación es similar al resto de hooks que hemos visto en artículos anteriores, ahora veamos cómo crear una referencia:

<br />

```js
const refContainer = useRef(initialValue);
```

<br />

Con esto tenemos una referencia, que podemos utilizar según sea necesario, cuando usamos este hook lo que se crea es un objeto con la siguiente estructura:

<br />

```js
{
	current: initialValue
}
```

<br />

Si no pasamos el initialValue, se le asignará por defecto `undefined`.

<br />

Una característica relevante que tiene el useRef es que persiste entre renderizados. Esto debido a que el objeto creado existe fuera del ciclo de renderizado del componente, haciendo que su valor persista durante todo el ciclo de vida. Es importante resaltar qué, cuando cambia la propiedad current del objeto, éste no genera un nuevo renderizado.

<br />

## **Acceso al DOM**

<br />

Con useRef podemos asignar una referencia a un elemento del DOM, esto nos permite acceder a un elemento específico de forma rápida. Si estuviésemos trabajando con Vanilla, podemos obtener un elemento del DOM utilizando los métodos de acceso, como **getElementById,** de esta forma:

<br />

```js
document.getElementById('id');
```

<br />

Con esto tenemos acceso a ese nodo del DOM y podemos modificar sus atributos, agregar eventos, etc. De igual forma ocurre con **useRef**, creamos una referencia, se la agregamos a un elemento y luego podemos accederlo a través de la propiedad **current**. Veamos un ejemplo típico donde tenemos un input, y queremos que al cargar la página el foco este sobre ese elemento:

<br />

```js
import { useEffect, useRef } from 'react';

const MyComponent = () => {
  const refElement = useRef();

  useEffect(() => {
    refElement.current.focus();
  }, []);

  return (
    <form>
      <label htmlFor='email'>Nombre</label>
      <input
        type='email'
        ref={refElement}
        id='email'
        placeholder='ingresa tu correo'
      />

      <label htmlFor='password'>Contraseña</label>
      <input type='password' id='password' placeholder='*******' />

      <button>Entrar</button>
    </form>
  );
};

export default MyComponent;
```

<br />

En este caso, tenemos un formulario, y queremos que al renderizarse completamente, el input de correo tenga el foco, es por esto que en nuestro useEffect activamos el foco en el input.  Durante el proceso de renderizado inicialmente .current toma el valor de `undefined`, al crear la referencia aún no se ha creado una estructura del DOM, por lo que aún nuestra referencia no esta asociada a ningún elemento. Luego tener una estructura, .current cambia su valor.

<br />

<blockquote class="text-black-300" style="padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #fac43d;background: #efefef; border-radius:5px;">
  <p> <strong>Nota</strong> : Alterar una referencia se considera un efecto secundario, por lo que debemos agregar la lógica que modifica la referencia dentro del hook <strong>useEffect</strong> para evitar comportamientos inesperados.</p>
</blockquote>

<br />

Otro caso que podemos encontrar es el reenvío de referencia entre componentes, es decir, supongamos que tenemos un componente padre, donde creamos una referencia y se la queremos pasar a un componente hijo y asignarla a uno de sus nodos. Podríamos pensar en pasarlo al componente y obtenerlo desde **props** de nuestro componente, de la siguiente manera:

<br />

```js
import { useEffect, useRef } from "react";

// Componente hijo
const Input = ({ ref, type, placeholder, id }) => {
  return <input 
      type={type} 
      ref={ref}
      id={id} 
      placeholder={placeholder} 
    />
};

const MyComponent = () => {
  const refElement = useRef();

  useEffect(() => {
    refElement.current.focus();
  }, []);

  return (
    <form>
      <label htmlFor="email">Nombre</label>
      <Input
        type="email"
        ref={refElement}
        id="email"
        placeholder="ingresa tu correo"
      />

      <label htmlFor="password">Contraseña</label>
      <Input 
        type="password" 
        id="password" 
        placeholder="*******" 
      />

      <button>Entrar</button>

    </form>
  );
};

export default MyComponent;
```

<br />

Este caso no funcionaria, porque los componentes de función no recibe ref como argumento, ni mucho menos están disponibles como propiedad en el objeto props. Para solucionar esto, utilizamos la función forwardRef disponible en react, que recibe un callback, y en los argumentos de ese callback, tenemos los  **props** y  **la referencia**. Veamos como quedaría nuestro ejemplo:

<br />

```js
import React, { useEffect, useRef } from "react";

const Input = React.forwardRef(( {type, placeholder, id }, ref) => {
  return <input 
      type={type} 
      ref={ref}
      id={id} 
      placeholder={placeholder} 
    />
});

const MyComponent = () => {
  const refElement = useRef();

  useEffect(() => {
    refElement.current.focus();
  }, []);

  return (
    <form>
      <label htmlFor="email">Nombre</label>
      <Input
        type="email"
        ref={refElement}
        id="email"
        placeholder="ingresa tu correo"
      />

      <label htmlFor="password">Contraseña</label>
      <Input 
        type="password" 
        id="password" 
        placeholder="*******" 
      />

      <button>Entrar</button>

    </form>
  );
};

export default MyComponent;
```

<br />

Y así ya podemos pasar la referencia a los componentes hijos, y hacer todas las modificaciones al nodo asociado desde el componente padre.

<br />

## **Mantener una variable mutable**

<br />

Como mencione al inicio del artículo podemos utilizar useRef de diferentes maneras, una de estas es para almacenar información mutable. Esto lo podemos hacer con el hook useState pero la principal diferencia que tiene useRef es que no dispara un nuevo renderizado cuando su propiedad current cambia.

<br />

Un ejemplo de uso de useRef es capturar el estado anterior de una variable, supongamos que tenemos una variable de estado que almacena un valor, si queremos guardar el estado anterior de esa variable podemos usar useRef, y como no se ve afectada en cada renderizado podemos mantener el valor durante el ciclo de vida. Veamos un ejemplo:

<br />

```js
import { useRef, useState } from "react";

const MyComponent = () => {
  const [number, setNumber] = useState(0);
  const refValue = useRef(0);

  const change = () => {
    const value = Math.random().toFixed(2);
    refValue.current = number;
    setNumber(value);
  };
  const prevValue = refValue.current;

  return (
    <div>
      <p>
        Valores: Nuevo {number}, Anterior {prevValue}{" "}
      </p>
      <button onClick={change}>Cambiar valor</button>
    </div>
  );
};

export default MyComponent;
```

<br />

Como se puede ver, tenemos una variable de estado, que cambia cada vez que pulsamos un botón, al pulsar el botón le asignamos un valor random, y adicional cambiamos el valor de la propiedad **current**, con el anterior valor que tiene la variable antes de cambiar.

<br />

Con esto, luego de cada renderizado que se hace al cambiar el estado, podemos obtener la variable con el valor anterior, y mostrarla en pantalla.

<br />

Como desarrolladores de React, en ocasiones nos hemos encontrado con el siguiente error: *“Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.”*

<br />

En concreto, lo que nos dice el error es que no podemos cambiar el estado de un componente que no está montado, es decir, si estamos usando variables de estado debemos asegurarnos de que este componente este disponible para poder cambiar el estado. Veamos un ejemplo de un caso donde nos podemos encontrar con este error.

<br />

```js
import { useEffect, useState } from 'react';

const Cocktail = () => {
  const [state, setState] = useState({
    loading: true,
    data: null
  });

  useEffect(() => {
    fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
      .then((response) => response.json())
      .then((result) => {
        setState({
          loading: false,
          data: result.drinks[0]
        });
      });
  }, []);

  return !state.loading ? (
    <div>
      <h1>Nombre: {state.data.strDrink}</h1>
      <p>Preparación: {state.data.strInstructions}</p>
    </div>
  ) : (
    <p>Cargando cocktail</p>
  );
};

const App = () => {
  const [show, setShow] = useState(true);

  return (
    <div>
      {show && <Cocktail />}
      <button onClick={() => setShow(!show)}>
        {show ? 'Ocultar' : 'Mostrar'}
      </button>
    </div>
  );
};

export default App;
```

<br />

En este ejemplo, tenemos un componente que realiza una petición a una API para obtener un Cocktail, luego de obtenerlo se actualiza el estado. Este componente es llamado condicionalmente, si se pulsa varias veces el botón del componente principal montará y desmontará el componente Cocktail en múltiples ocasiones. Cuando el componente se ha desmontado el useEffect sigue ejecutándose, por lo que intentará actualizar el estado, y obtendremos el error antes mencionado.

<br />

Para evitar este error vamos a usar useRef y nos ayudaremos de la función de limpieza del useEffect, que no permitirá mutar el valor de la referencia y así poder controlar la actualización del estado.

<br />

```js
import { useEffect, useRef, useState } from 'react';

const Cocktail = () => {
  const isMounted = useRef(true);
  const [state, setState] = useState({
    loading: true,
    data: null
  });

  useEffect(() => {
    fetch('https://www.thecocktaildb.com/api/json/v1/1/random.php')
      .then((response) => response.json())
      .then((result) => {
        if (isMounted.current) {
          setState({
            loading: false,
            data: result.drinks[0]
          });
        }
      });

    return () => {
      isMounted.current = false;
    };
  }, []);

  return !state.loading ? (
    <div>
      <h1>Nombre: {state.data.strDrink}</h1>
      <p>Preparación: {state.data.strInstructions}</p>
    </div>
  ) : (
    <p>Cargando cocktail</p>
  );
};

const App = () => {
  const [show, setShow] = useState(1);

  return (
    <div>
      {show && <Cocktail />}
      <button onClick={() => setShow(!show)}>
        {show ? 'Ocultar' : 'Mostrar'}
      </button>
    </div>
  );
};

export default App;
```

<br />

Como podemos ver, tenemos creamos una nueva referencia `isMounted` cuyo valor inicial es `true`, esta referencia la usaremos para determinar si el componente esta o no montado. En nuestro useEffect agregamos la función de limpieza, para modificar nuestra referencia. En la llamada a la API verificamos si el componente esta montado, así si ha sido desmontado no se realiza la actualización del estado y evitamos obtener el error antes mencionado.

<br />

## **Conclusión**

<br />

Pudimos ver que el hook useRef es una característica muy importante cuando necesitamos acceder a elementos del DOM o mantener una variable mutable. Sin embargo, es recomendable no abusar de su uso. Conocimos todos los posibles casos de uso, y como este hook nos puede ayudar.

<br />

Si te gusto el artículo, compártelo con tus amigos o en tus redes para llegar a más personas. Si tienes alguna duda o comentario no dudes en dejarme un comentario y te responderé en la brevedad posible.

<br />

¿Que otro hook te gustaría conocer?

medium_banner-useref-react.png

small_banner-useref-react.png

thumbnail_banner-useref-react.png

banner-useref-react.png

useRef devuelve un objeto ref mutable cuya propiedad .current se inicializa con el argumento pasado (initialValue). El objeto devuelto se mantendrá persistente durante la vida completa del componente.

React Hooks: Guía useRef

En el artículo anterior conocimos un poco sobre la teoría de hooks, y hablamos sobre el hook <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://andresdamelio.tech/blog/react-hooks-guia-usestate" target="_blank" rel="noreferrer">useState</a> y sus diversos usos. En esta ocasión vamos a conocer el hook **useEffect**, y estudiaremos diversos casos de uso en nuestros proyectos.

<br />

Para entender esto mejor debemos empezar desde lo más básico, y es qué hace React, lo principal es representar nuestro HTML en el DOM, lo que se conoce como efecto primario, React toma el HTML y lo renderiza, pero en ocasiones necesitamos realizar acciones más allá del renderizado. Estas acciones se conocen como efectos secundarios, estos no deberían en ningún momento ocurrir dentro del renderizado. Si te preguntas ¿Por qué? La respuesta es que el proceso de renderizado de React, debe ser puro, es decir, debe devolver su contenido y no cambiar ninguna variable creada antes del renderizado.

<br />

Ahora, estos efectos secundarios tienen que ocurrir en algún momento, efectos como obtener datos de una API, utilizar alguna APi del navegador, etc. Es por esto que React nos ofrece un hook especial que nos permite ejecutar estos efectos secundarios, quedando así aislados de la lógica de renderizado de React, este hook es **useEffect**

<br />

En la documentación oficial de React, encontramos lo siguiente  **“El *Hook de efecto*
 te permite llevar a cabo efectos secundarios en componentes funcionales:”** 

<br />

Estos efectos secundarios pueden llevar a un nuevo renderizado. Si el efecto cambia el estado se produce una nueva renderización, en caso contrario no influye. **useEffect** puede verse como una combinación de **componenteDidMount**, **componenteDidUpdate** y **componenteWillUnmount** pertenecientes al ciclo de vida de los componentes de clases en React.

<br />

Para utilizar este hook debemos extraerlo desde react de la siguiente manera:

<br />

```js
import { useEffect } from 'react';
```

<br />

Con esto podemos utilizarlo dentro de nuestro componente. Es importante resaltar que podemos usar este hook múltiples veces en un solo componente, esto depende de nuestras necesidades.

<br />


## **Estructura del useEffect**


<br />

El hook useEffect tiene la siguiente estructura

<br />

```js
useEffect(callback, [dependencies]);
```

<br />

Como se puede ver, este hook recibe dos parámetros, uno de ellos opcional, veamos un poco cuál es la función de estos

<br />

- **callback**: Esta función nos va a permitir definir nuestros efectos secundarios, todas aquellas acciones que queremos realizar luego del renderizado. Adicional a esto, podemos limpiar estos efectos al desmontarse nuestro componente, más adelante hablaremos de esto.
<br />
- **dependencies:** Este parámetro es opcional, y nos permite condicionar nuestros efectos secundarios, dentro de esta matriz podemos agregar ciertas dependencias que hacen que nuestros efectos se ejecuten nuevamente en el momentos que estas cambien.

<br />

## **Usos del useEffect**

<br />

Tomando en cuenta lo dicho anteriormente sobre los parámetros que recibe el hook, veamos cada caso de uso que podemos tener en nuestro código.

<br />

## **useEffect sin dependencia**

<br />

Si no pasamos la matriz de dependencias a nuestro hook de efecto, el callback se ejecutará en cada renderizado, es decir, cada vez que ocurra un nuevo renderizado este efecto se ejecutará. Es muy poco común utilizarlo de esta forma, una de las principales razones es que puede generar ciclos infinitos en nuestra aplicación. Supongamos que tenemos un componente con el siguiente código:

<br />

```js
import {useState, useEffect } from 'react';

const MyComponent = () => {
	const [message, setMessage] = useState('Hola mundo');

	useEffect(() => { 
		setMessage('Hola de nuevo')
	});

	return <h1>{message}</h1>;
}

export default MyComponent;
```

<br />

Al llamar a este componente tendremos un ciclo infinito, como vemos tenemos un estado inicial ‘Hola mundo’ con el cual empieza el renderizado del componente, luego de terminar el renderizado se ejecuta nuestro efecto secundario, donde se asigna un nuevo valor a nuestra variable de estado message, cuando ocurre un cambio de estado nuestro componente vuelve a renderizarse, lo que hace que nuestro efecto se ejecute nuevamente, creando así un ciclo que nos llevaría a tener el siguiente error:

<br />

<blockquote class="text-red-500" style="padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #dc2626;background: #fee2e2; border-radius:5px;">
  <p style="color:#dc2626;font-weight:400;"> Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.</p>
</blockquote>

<br />

Esto es un comportamiento no deseado en nuestra aplicación, por lo que hace que usar el hook de efecto de esta manera no sea una buena opción. Veamos cómo podemos solucionar este error usando nuestra matriz de dependencias. Encuentra el código del ejemplo <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/useeffect-without-dependencies-matrix-dzd22f" target="_blank" rel="noreferrer">acá</a>.

<br />

### **useEffect con matriz de dependencias vacía**

<br />

Este es un caso de uso muy común, si queremos que ocurra un efecto secundario una sola vez, pasamos nuestra matriz de dependencia vacía, lo que hace que al terminar el renderizado se ejecuten nuestros efectos secundarios una sola vez. Veamos como sería con el ejemplo anterior:

<br />

```js
import {useState, useEffect } from 'react';

const MyComponent = () => {
	const [message, setMessage] = useState('Hola mundo');

	useEffect(() => {
      setMessage('Hola de nuevo')
    }, []);

    return <h1>{message}</h1>;
}

export default MyComponent;
```
<br />

Como podemos ver, nuestro código es casi idéntico a diferencia de que ahora nuestro hook de efecto recibe como parámetro una matriz vacía. Esto evita que ocurran bucles infinitos. Este caso es uno de los mas usados. Un ejemplo de caso de uso sería una llamada a una API para obtener datos, normalmente queremos que la petición se realice una sola vez. Supongamos que queremos obtener un listado de usuarios para usar en nuestro componente.

<br />

```js
import {useState, useEffect } from 'react';

const MyComponent = () => {
	const [users, setUsers] = useState([]);
	const [load, setLoad] = useState(false)
	useEffect(() => {
		fetch('https://jsonplaceholder.typicode.com/users')
			.then(response => response.json())
			.then(result => {
                setLoad(true)
				setUsers(result)
			})
	}, []);

	return load ? (
			<ul>
				{users.map((user) => {
					return <li key={user.id}>{user.name}</li>
				})}
			</ul>
		) : (
			<h2>Cargando datos...</h2>
		)
}

export default MyComponent;
```

<br />

En este caso nuestro componente en su renderizado inicial mostrará en pantalla el texto ‘Cargando datos’, luego de terminar el renderizado, empieza la ejecución de nuestros efectos secundarios, en este caso tenemos una llamada a una API para obtener un listado de usuarios, luego de obtener los datos de la API, actualizamos nuestras variables de estado, lo que hace que nuestro componente se vuelva a renderizar, mostrando de esta manera los datos obtenidos de nuestra API. Encuentra el código de los ejemplos anteriores <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/useeffect-with-empty-dependencies-matrix-b01hf3" target="_blank" rel="noreferrer">primer ejemplo</a> y <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/useeffect-get-dara-from-api-w6otmy" target="_blank" rel="noreferrer">segundo ejemplo</a>

<br />

## **useEffect condicionado por dependencias**

<br />

Nuestro hook de efecto se ejecuta luego del renderizado, si tenemos nuestra matriz de dependencias vacía, este se ejecutará una sola vez, pero en ocasiones queremos que nuestros efectos se ejecuten luego de que ocurra algún cambio en nuestro componente, ya sea que cambio nuestro state, o que haya cambiado algún prop recibido, etc. Podemos controlar la ejecución de nuestros efectos y así permitir que se ejecuten nuevamente cuando cambie algunas de las dependencias pasadas en el matriz. Después de cada renderizado React procede a verificar si alguna dependencia cambió, si este es el caso ejecuta el efecto nuevamente. Veamos un ejemplo donde ejecutaremos nuestro efecto luego de que nuestro estado cambie:

<br />

```js
import { useEffect, useState } from "react";

const MyComponent = () => {
  const [id, setId] = useState(1);
  const [quote, setQuote] = useState(null);
  const [load, setLoad] = useState(false);

  useEffect(() => {
    setLoad(false);
    fetch(`https://www.breakingbadapi.com/api/quotes/${id}`)
      .then((response) => response.json())
      .then((quote) => {
        setQuote(quote[0]);
        setLoad(true);
      });
  }, [id]);

  return load ? (
    <div>
      <h2>{quote.quote}</h2>
      <p>Autor: {quote.author}</p>

      <button onClick={() => setId((prev) => prev + 1)}>Siguiente cita</button>
    </div>
  ) : (
    <h2>Cargando citas...</h2>
  );
};

export default MyComponent;
```

<br />

Para este ejemplo queremos mostrar como funciona la dependencia en el hook de efecto, en este caso queremos obtener citas de una API, y las obtendremos por Id, partiendo desde el id 1 que es nuestro estado inicial, luego de renderizar se ejecuta nuestro efecto y trae los datos de la cita con id 1, se produce un nuevo renderizado donde se muestra los valores, y adicional a eso mostramos un botón para obtener la siguiente cita, este botón básicamente lo que hace es que al ser presionado modifica nuestra variable de estado id, al cambiar el estado de nuestro componente se produce un nuevo renderizado y es donde React verifica si nuestras dependencias han cambiado, al notar que si ocurrió un cambio, procede a ejecutar nuevamente nuestros efectos, que en este caso es buscar en la API la cita con el id actualizado. Puedes encontrar el código del ejemplo <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/useeffect-with-dependencies-0e9qwp" target="_blank" rel="noreferrer">acá</a>.

<br />

Es importante resaltar que podemos pasar tantas dependencias sean necesarias, y no solo variables de estado, también podemos pasar props, podemos tener lo siguiente:

<br />

```js
useEffect(() => {
	// código a ejecutas
}, [state1, state2,..., stateN, props]);
```

<br />

Todos estos son los diferentes casos de uso que tenemos para hook de efecto **useEffect**, podemos usar cualquier caso según nuestras necesidades, adicional podemos tener múltiples useEffect, incluso el equipo de react recomienda usar varios useEffect para separar conceptos, es decir, no agrupar lógica que no este relacionada en nuestra aplicación. Supongamos que queremos consultar a una API, pero adicional a esto queremos agregar un evento a nuestro documento, estos dos casos no están relacionados, por lo que se aconseja no agruparlos, veamos como sería la implementación:

<br />

```js
import { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  useEffect(() => {
    window.addEventListener('resize', () => {
      // codigo 
    });
  }, []);
  

  // return HTML/JSX 
}
```

<br />

## **Limpieza del useEffect**

<br />

Este es un punto muy importante cuando usamos **useEffect**, si queremos cuidar el rendimiento o comportamientos inesperados en nuestra aplicación debemos limpiar los efectos secundarios. Hasta ahora hemos visto cómo funciona el hook de efecto, pero no sabemos que pasa después que nuestro componente es desmontado, o cuando ocurre una nueva ejecución del hook. En algunos casos los efectos secundarios pueden seguir ejecutándose aún cuando el componente se ha desmontado.

<br />

Para limpiar un efecto secundario, el callback que recibe como primer parámetro el useEffect debe de retornar una función, dentro de esta función retornada debe ir toda nuestra lógica de limpieza. Veamos como es la estructura de useEffect con la limpieza:

<br />

```js
useEffect(() => {
	// Logica de efectos secundarios
	return () => {
		// Lógica de limpieza de efectos secundarios
	}
}, []);
```

<br />

Veamos un ejemplo:

<br />


```js
//MyComponent.js 
import { useEffect, useState } from "react";

const MyComponent = () => {
  const [screeSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const resize = () => {
      console.log("ejecutando resize");
      setScreenSize({ width: window.innerWidth, height: window.innerHeight });
    };
    window.addEventListener("resize", resize);
  }, []);

  return (
    <div>
      <h2>Screen Size</h2>
      <p>Width: {screeSize.width}</p>
      <p>Height: {screeSize.height}</p>
    </div>
  );
};

export default MyComponent;

// App.js
import MyComponent from "./MyComponent";
import { useState } from "react";
export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      {show && <MyComponent />}
      <button onClick={() => setShow(!show)}>
        {show ? "Ocultar" : "Mostrar"}
      </button>
    </div>
  );
}
```

<br />

Como vemos en el ejemplo tenemos un componente que es mostrado condicionalmente, este componente agrega a la ventana el evento resize para ir mostrando el alto y ancho de la pantalla. Como no tenemos una limpieza en nuestro hook de efecto al desmontarse el componente el efecto secundario seguirá ejecutándose, y a medida que se monta y desmonta va agregando más eventos resize a la ventana. Esto se puede comprobar pulsando en varias ocasiones el botón de mostrar/ocultar y ver el número de impresiones que se hacen al cambiar el tamaño de la pantalla. En este enlace te dejo el <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/jovial-meadow-bbirej" target="_blank" rel="noreferrer">código</a>.

<br />

Para evitar esto, debemos retornar la función de limpieza, donde removemos el evento asociado, nuestro useEffect quedaría de la siguiente forma:

<br />

```js
useEffect(() => {
  const resize = () => {
    console.log("ejecutando resize");
    setScreenSize({ width: window.innerWidth, height: window.innerHeight });
  };
  window.addEventListener("resize", resize);

	return () => {
		window.removeEventListener("resize", resize);
	}
}, []);
```
<br />

El resultado lo puedes ver en el siguiente <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://codesandbox.io/s/useeffect-with-cleanup-gds19m" target="_blank" rel="noreferrer">enlace</a>.

<br />

## **Conclusión**

<br />

En esta ocasión conocimos al hook useEffect que juega un papel muy importante en nuestras aplicaciones, el hecho de ejecutar efectos secundarios en nuestros componentes nos da un plus a la hora de trabajar con React. Con esto espero que hayas aprendido y comprendido todo su funcionamiento y que los puedas usar en tus aplicaciones. Si tienes alguna duda no dudes en dejar tu comentario y te responderé en la brevedad posible.

<br />

Si te gusto este artículo puedes compartirlo cons tus amigos o en tus redes sociales, y así llegar a mas personas.












medium_banner-useeffect-react.png

small_banner-useeffect-react.png

thumbnail_banner-useeffect-react.png

banner-useeffect-react.png

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

React Hooks: Guía useEffect

A partir de la versión 16.8 se incorporan los **Hooks** en React con el propósito de manejar el estado y ciclo de vida en los componentes de función. Los Hooks son funciones que nos permiten usar React sin clases, estas funciones podemos importarlas desde el paquete React. Tenemos muchos Hooks disponibles para usar, uno de ellos es **useState** quizás uno de los más importantes y usados en React.

<br />

## **Inicialización del estado**
 
El Hook **useState** nos permite manejar el estado en un componente de función, este estado funciona como una memoria que almacena los datos de un componente y conserva estos datos en el ciclo de vida del componente. Veamos un ejemplo de como usarlo:

```js
import { useState } from 'React';

const MyComponent = () => {
	const [count, setCount] = useState(0);
};

export default MyComponent;
```

<br />

Lo primero que hacemos es importarlo desde React, luego de esto tenemos a nuestra disposición la función para crear las variables de estado que necesitemos en nuestro componente.

<br />

**useState** toma un valor inicial, este valor puede ser de cualquier tipo de dato disponible en Javascript, en el ejemplo anterior utilizamos un valor numérico, pero puede ser una cadena de texto, un objeto, un arreglo, un valor booleano, etc.

<br />

Este Hook retorna un arreglo, donde el primer valor es el estado actual, y la segunda es una función que usaremos para actualizar el valor de nuestro estado. Para obtener los elementos del arreglo retornado utilizamos la desestructuración de arreglos. En el ejemplo anterior observamos que tenemos como primer elemento **count** que representa nuestra variable de estado, su valor inicial para este caso es 0,  y como segundo elemento **setCount** que representa la función para actualizar el valor de la variable **count**.

<br />

Nuestra variable de estado estará disponible en nuestro componente y la podemos usar de forma directa

```js
import { useState } from 'React';

const MyComponent = () => {
	const [count, setCount] = useState(0);

	return <h1>Contador { count }<h1>
};

export default MyComponent;
```

<br />

Con esto veremos en pantalla el texto "Contador 0". 

<br />

## **Actualización del estado**

Para cambiar nuestra variable de estado haremos uso del segundo elemento retornado por **useState**, esta función la podemos utilizar de diversas formas, veamos cada una de ellas utilizando el ejemplo anterior.

```js
import { useState } from 'React';

const MyComponent = () => {
	const [count, setCount] = useState(0);

	return (
		<>
			<h1>Contador { count }</h1>
			<button onClick={() => setCount(count - 1)}>Decrementar</button>
			<button onClick={() => setCount(count + 1)}>Incrementar</button>
		<>
	);
};

export default MyComponent;
```

<br />

En este ejemplo utilizamos la función **setCount** en el evento click de los botones, por lo que al dar click a cualquiera de los botones se actualizará la variable **count.** Es importante resaltar qué para usar la función de actualización de esta forma debemos de pasar al evento click una función que retorne el **setCount**, con esto aseguramos que la función se ejecute solo al darle click. Si lo hiciéramos así  `onClick={ setCount(count - 1)}` ó `onClick={setCount(count + 1)}` tendríamos un error, porque se estaría ejecutando la función múltiples veces lo que ocasionaría muchísimos renderizados, y React limita el número de llamadas a la función render para evitar ciclos infinitos.

<br />

Si no tenemos acceso directo a la variable de estado, dentro de la función de actualización podemos obtener el valor directamente, y actualizarlo, veamos:

```js
import { useState } from 'React';

const MyComponent = () => {
	const [count, setCount] = useState(0);

	return (
		<>
			<h1>Contador { count }</h1>
			<button onClick={() => setCount((prev) => prev - 1)}>Decrementar</button>
			<button onClick={() => setCount((prev) => prev + 1)}>Incrementar</button>
		<>
	);
};

export default MyComponent;
```

<br />

Al utilizar la función de actualización, el estado previo se actualiza, y toma un nuevo valor. Cuando nuestro estado es un arreglo u objeto debemos tener precaución porque podemos perder el valor del estado previo, ya que estos no se fusionan, veamos un ejemplo:

```js
const [user, setUser] = useState({
	name: 'Andrés',
	age: 25
});

setUser({ name: 'José' });
```

<br />

En esta caso podríamos pensar que el nuevo valor de la variable de estado **user** es  

```js
{ name: 'José', age: 25 }
```

<br />

Pero no es el caso, al invocar setUser estamos asignando un nuevo valor, por lo que el valor anterior se pierde, y así el nuevo valor es

```js
{ name: 'José' }
```

<br />

Para evitar esto, y conservar la estructura de nuestro estado, debemos realizar una fusión de forma manual, es decir, actualizar únicamente el valor sin perder la forma inicial, para esto usamos el estado anterior junto con el operador de propagación, veamos:

```js
const [user, setUser] = useState({
	name: 'Andrés',
	age: 25
});

setUser({ ...user, name: 'José' });
```

<br />

Con esto mantenemos la estructura de nuestro estado inicial, y solo actualizamos el valor de la propiedad name mediante el operador de propagación. 

<br />

useState tiene el mismo comportamiento con los arreglos, debemos fusionarlos de forma manual, veamos un ejemplo:

```js
const [colours, setColours] = useState(['red', 'blue', 'yellow']);

setColours([ ...colours, 'white' ]);
```

<br />

<blockquote class="text-black-300" style="padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #fac43d;background: #efefef; border-radius:5px;">
  <p> <strong>Nota</strong>: Cuando trabajamos con arreglos u objetos anidados se recomienda separarlos en varias variables de estado porque esto resulta costoso para el rendimiento de nuestras aplicaciones, pues React puede volver a renderizar elementos donde usemos propiedades que no se han actualizado.</p>
</blockquote>

<br />

El Hook **useState** también nos permite trabajar con formularios de forma rápida y sencilla, veamos como:

```js
 import { useState } from 'React';

const MyComponent = () => {
	const [user, setUser] = useState({
		name: '',
		age: 0
	});

	const handleChange = (name) => (event) => {
     setUser({ ...user, [name]: event.target.value });
    };

	return (
		<form>
          <input
            placeholder="Nombre"
            value={user.name}
            onChange={handleChange('name')}
          />
	      <input
	        type="number"
            placeholder="Edad"
            value={user.age}
            onChange={handleChange('age')}
          />
	      <button type="submit">Crear</button>
		</form>
	);
};

export default MyComponent;
```
<br />

## **Llamadas múltiples a useState**

En algunos casos puede ocurrir que nuestra función de actualización sea llamada varias veces de forma simultánea, esto puede ser un problema al momento de actualizar nuestro estado dependiendo de la forma en la que se está invocando a la función de actualización. Veamos un pequeño ejemplo de un formulario de datos de usuario donde además tendremos un componente de imagen que realiza una operación asíncrona en el servidor y devuelve la URL de una imagen.

<br />

```js
import { useState } from 'React';
import Upload from './components/Upload';

const MyComponent = () => {
	const [user, setUser] = useState({
		name: '',
		age: 0,
        photo: ''
	});

	const handleChange = (name) => (event) => {
      setUser({ ...user, [name]: event.target.value });
    };

     const handleAddPhoto = (url) => {
      setUser({ ...user, photo: url });
     };

	return (
		<form>
			<Upload
			  value={user.photo}
			  setImage={handleAddPhoto}
			/>
			<input
              placeholder="Nombre"
              value={user.name}
              onChange={handleChange('name')}
            />
	        <input
	          type="number"
              placeholder="Edad"
              value={user.age}
              onChange={handleChange('age')}
             />
	         <button type="submit">Crear</button>
		</form>
	);
};

export default MyComponent;
```
Si por ejemplo, seleccionamos una imagen para ser subida y llenamos el formulario, al terminarse la operación de subida y ejecutarse la función **handleAddPhoto** veremos que los cambios que hicimos en nuestro formulario luego de adjuntar la foto se perderán.  ¿A qué se debe esto? En este caso las funciones **handleChange** y **handleAddPhoto** tienen un **cierre (closure)** de user y su valor asignado en el renderizado actual. Por lo que  en este caso al renderizarse el componente para ambas funciones **user** tiene el mismo valor, así que al invocarse se estará actualizando con el valor inicial. Ahora en nuestro ejemplo si subimos nuestra imagen se realiza una petición hacía algún servidor, esta operación no se realiza de forma inmediata por lo que al terminar actualizará el estado, y al tener el cierre inicial, cancelará todos los cambios que se hicieron en el formulario luego de subir la imagen.

Una solución para este problema es utilizar en nuestra función de actualización un callback para obtener el estado actualizado y evitar este problema, nuestra funciones quedaría de la siguiente forma

<br /> 

```js
const handleChange = (name) => (event) => {
	setUser((previousState) => { ...previousState, [name]: event.target.value });
};

const handleAddPhoto = (url) => {
	setUser((previousState) => { ...previousState, photo: url });
};
```
<br />

Con esto nuestro estado se irá actualizando tomando como referencia el estado actual.

<br />

## **Conclusión**

**useState** es uno de los Hooks más importantes y usados que debes conocer, por el papel fundamental que tienen en el manejo del estado en nuestros componentes, ya sabes cómo usarlo y puedes ponerlo en práctica en tus proyectos. **Si te gustó compártelo en tus redes** y así ayudamos a más personas a entender este concepto tan confuso en javascript. Si tienes alguna duda déjala en los comentarios y te responderé en la brevedad posible.

¿Sobre que otro hook te gustaría ver un artículo?

medium_banner-usestate-react.png

small_banner-usestate-react.png

thumbnail_banner-usestate-react.png

banner-usestate-react.png

El Hook useState nos permite manejar el estado en un componente de función, este estado funciona como una memoria que almacena los datos de un componente y conserva estos datos en el ciclo de vida del componente. Veamos un ejemplo de como usarlo

React Hooks: Guía useState

**This** en javascript es uno de los conceptos más complicados de entender, tiene un comportamiento diferente al this de otros lenguajes de programación como PHP, Java, etc.  El valor de this es una referencia a un objeto, esta referencia puede variar dependiendo del contexto donde se esta ejecutando el código. This se comporta de forma diferente dependiendo del modo de ejecución donde se encuentra javascript, estos modos son `estricto` y `no estricto (sloppy mode)`. Si quieres saber más del modo estricto te dejo un enlace donde puedes conseguir más información <a class="font-medium text-yellow-800 dark:text-yellow-300" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Strict_mode
" target="_blank" rel="noreferrer">modo estricto</a>. <br/><br/>

<blockquote class="text-black-300" style="padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #fac43d;background: #efefef; border-radius:5px;">
  <p> <strong>Contexto</strong> : Objeto que esta ejecutando la función en un momento especifico.</p>
</blockquote>
<br/>El proceso donde this toma un valor, se le conoce como enlazamiento (binding en ingles). En este articulo te explicare los distintos tipos de enlazamientos y te daré algunos ejemplos <br/><br/>

<ul style="padding-inline-start: 40px;list-style: disc;">
  <li><strong>Lexical Binding</strong> (Funciones de flecha)</li>
  <li><strong>New Binding</strong>  (Instanciar Objetos)</li>
  <li><strong>Explicit Binding</strong> (Invocación indirecta)</li>
  <li><strong>Implicit Binding</strong> (Invocación de método)</li>
  <li><strong>Default Binding</strong> (Invocación directa)</li>
</ul>
<br/>
Javascript evalúa ciertas condiciones para determinar que tipo de enlazamiento se debe usar, para esto toma en cuenta ciertas condiciones como <br/><br/>

<ul style="padding-inline-start: 40px;list-style: disc;">
  <li>El lugar donde es creada la función, es decir, si fue creada dentro de una clase, un objeto, una función global, etc.</li>
  <li>Modificaciones que ha recibido la función.</li>
  <li>El lugar donde es invocada.</li>
</ul>
<br/>
 
Ahora veamos a fondo cada uno de estos enlazamientos, partiendo desde el más simple. 
<br/>
## **Default Binding**
Este es el tipo de enlazamiento que viene por defecto en Javascript, es la última opción a tomar en cuenta por el lenguaje, es decir, primero evalúa si el tipo de enlazamiento es cualquiera de los otros cuatro antes mencionados, en caso contrario toma este. El valor que toma this es el objeto global, en el caso de los navegadores web se toma el objeto global es **window**, por otro lado, cuando trabajamos del lado del servidor con NodeJS es **global**.

```js
function fn() {
  return this
}
fn() === window 
// Salida: True
```

Como podemos ver, en este caso this y window apuntan al mismo espacio en memoria, esto lo podemos comprobar

```js
this.saludo = "Hola a todos"
console.log(window.saludo) 
// Salida: Hola a todos
```

<br/>Este tipo de enlazamiento tiene un comportamiento distinto en las funciones cuando ejecutamos el modo estricto en javascript, el valor que toma this es **undefined**,  esto debido a que este modo de ejecución no permite el enlace predeterminado. Fuera de funciones, this sigue siendo el objeto global window.
<br/>
## **Implicit Binding**

Este enlazamiento ocurre cuando invocamos un método de un objeto. En esta invocación, this toma como valor el objeto que llama dicho método, en otras palabras, toma el valor del objeto que esta a la izquierda del llamado, o lo que esta antes del punto que hace la llamada, veamos un ejemplo:

```js
let persona = {
  nombre: "Bill",
  saludar: function() {
    console.log(`Hola, me llamo ${this.nombre}`)
  },
  esposa: {
    nombre: "Melinda",
    saludar: function() {
      console.log(`Hola, soy ${this.nombre} la esposa de Bill`)
    }
  }
}
persona.saludar()
// Salida: Hola, me llamo Bill
persona.esposa.saludar()
// Salida: Hola, soy Melinda la esposa de Bill
```
En este ejemplo podemos ver en enlazamiento implícito de una forma más clara, como mencione anteriormente en este tipo, this toma el valor del objeto que invoca al método, en el primer caso, **this** hace referencia al objeto **persona**, como se puede observar este objeto es el que invoca al método **saludar**. Para el segundo caso this toma otro valor, this hace referencia al objeto **esposa**, con esto se cumple que el valor de this en el enlazamiento implícito hace referencia al objeto que invoca al método.
<br/>
## **Explicit Binding**

Este enlazamiento no permite mantener o cambiar el valor de this según nuestras necesidades, en javascript es muy común perder el valor de this sin darnos cuenta, como vimos en el ejemplo anterior this no siempre es el mismo y su valor siempre está cambiando, con este enlazamiento podemos atar un valor a this. Este tipo se conoce como **enlazamiento fuerte**. Tenemos tres métodos que nos permiten aplicar este enlazamiento, estos son **call, apply** y **bind**. 
<br/>
### **Call**
Este método nos permite cambiarle el contexto a una función al momento de ejecutarla. Es decir, veamos esto como tomar prestada una función para usarla con otro objeto, y que this tome el valor de ese objeto. Este método recibe como primer parámetro el objeto al que vamos a atar a la función, y otros parámetros opcionales que se pasan uno a uno en caso de que la función los requiera. Veamos un ejemplo

```js
function verTipado(tipado) {
  console.log(`El lenguaje de programación ${this.nombre} es de tipado ${tipado}`)
}

const java = { nombre: "Java" }
const javascript = { nombre: "Javascript" }

verTipado.call(java, "fuerte")
// Salida: El lenguaje de programación Java es de tipado fuerte
verTipado.call(javascript, "débil")
// Salida: El lenguaje de programación Javascript es de tipado débil
```
 Si ejecutamos directamente la función **verTipado**, el valor de this es window, que es el contexto global, en este punto, esta función no esta relacionada con los objetos **java** y **javascript**, si queremos que estén relacionados podemos usar este método, con esto creamos el enlazamiento, de allí el nombre de explicito. En el ejemplo vemos que pasamos el valor del parámetro que recibe la función, esto puede variar según la función, si recibe más de uno se pasan separados por coma. Veamos

```js
funcion.call(obj, arg1, arg2, ... , argn)
```
<br/>

### **apply**
Este método funciona de forma similar a **call**, con una única diferencia y es que los parámetros de la función son enviados en un arreglo, veamos como quedaría con el ejemplo anterior

```js
function verTipado(tipado) {
  console.log(`El lenguaje de programación ${this.nombre} es de tipado ${tipado}`)
}

const java = { nombre: "Java" }
const javascript = { nombre: "Javascript" }

verTipado.apply(java, ["fuerte"])
// Salida: El lenguaje de programación Java es de tipado fuerte
verTipado.apply(javascript, ["débil"])
// Salida: El lenguaje de programación Javascript es de tipado débil
```
En este caso los parámetros que recibe la función son enviados en un arreglo
```js
funcion.apply(obj, [arg1, arg2, ... , argn])
```

El resultado al usar **call** y **apply**  es el mismo, en mi opinión es más sencillo usar **apply**, usando este método evitamos cambiar la llamada de la función, solo agregamos un nuevo valor al arreglo.

<br/>

### **bind**

De los ejemplos anteriores, cuando invocábamos a los métodos **call** y **apply** obtenemos resultados de forma inmediata, con **bind** no ocurre eso, este método; que es uno de los más usados, crea una nueva función y la enlaza al objeto que recibe como parámetro. Es muy útil cuando necesitamos ejecutar una función asociada a un objeto múltiples veces. Veamos un ejemplo

```js
function verTipado(tipado) {
  console.log(`El lenguaje de programación ${this.nombre} es de tipado ${tipado}`)
}

const javascript = { nombre: "Javascript" }

// Asignamos la nueva función a una constante
const tipadoJavascript = verTipado.bind(javascript, "débil")

tipadoJavascript()
// Salida: El lenguaje de programación Javascript es de tipado débil
```
<br/><blockquote class="text-black-300" style="padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #fac43d;background: #efefef; border-radius:5px;">
  <p> <strong>Nota</strong> : Las funciones que fueron creadas con bind no pueden volver a ser enlazadas con otro objeto.</p>
</blockquote>

<br/>Este método sirve mucho cuando trabajamos sobre los métodos de una clase, pues algunos otros métodos modifican el valor de this, uno de estos es **setTimeout**, dentro de este, this toma el valor del objeto global window, en estos caso podemos usar bind para mantener la referencia del contexto.

```js
class Persona {
	constructor(nombre, apellido) {
		this.nombre = nombre
		this.apellido = apellido
	}

	saludar() {
		setTimeout(this.presentarse.bind(this), 500)
	}

	presentarse() {
		console.log(`Hola, me llamo ${this.nombre} ${this.apellido}`)
	}
}

const bill = new Persona("Bill", "Gates")
bill.saludar()
// Salida: Hola, me llamo Bill Gates
```
 En este ejemplo, tenemos dos métodos que pertenecen a la clase persona: **presentarse**, que imprime un mensaje por consola, y **saludar**, que ejecuta al método presentarse después de 500 milisegundos. Y con el fin de mantener la referencia a la clase persona, pasamos el método presentarse al **setTimeout**, invocando al **bind**.

<br/>

## **New Binding**

Un viejo conocido, cuando construimos clases o funciones constructoras, creamos instancias de ellas, para esto usamos la palabra reservada **new**, lo que indica que creará una instancia de esa clase o función constructora, en este punto se produce un enlazamiento de **this** con el objeto creado, ya en los ejemplos anteriores tuvimos un acercamiento a este enlazamiento, veamos un nuevo ejemplo

```js
// Usando función constructora
function Persona(nombre, apellido) {
	this.nombre = nombre
	this.apellido = apellido
}
const tim = new Persona("Tim", "Cook")

// Usando clases
class Persona {
	constructor(nombre, apellido) {
		this.nombre = nombre
		this.apellido = apellido
	}
}

const bill = new Persona("Bill", "Gates")
```

Al crear cada instancia se produce el enlazamiento con el objeto creado, para el primer caso this tomará al objeto tim, en el segundo caso this tomará el valor de bill. Para este tipo de enlazamiento no podemos usar los métodos bind, call y apply, porque estamos creando nuevas instancias de objetos, y estos son enlazados directamente.

<br/>

## **Lexical Binding**

Este tipo de enlazamiento se da cuando usamos funciones de flecha. Las funciones de flecha tienen un comportamiento en particular y es que se ejecutan en el mismo contexto donde fueron creadas, por lo que el valor de this dentro de una función de flecha es el objeto que envuelve dicha función. Veamos un caso donde el valor de this no es el deseado

```js
const lenguaje = {
  nombre: "C++",
  verTipado: () => {
    console.log(`El lenguaje de programación ${this.nombre} es fuertemente tipado`)
  }
}
lenguaje.verTipado()
// Salida: El lenguaje de programación undefined es fuertemente tipado
```
```this.nombre``` es **undefined**, podríamos pensar que el valor de this esta enlazado con el objeto lenguaje, en este caso no ocurre de esa forma, verTipado se carga en memoria cuando se crea el objeto lenguaje, en este punto de la creación this esta enlazado con el objeto global window. En las funciones de flecha no siempre el valor de this es window, veamos un caso,

```js
const lenguaje = {
  nombre: "C++",
  verTipado: function() {	
    setTimeout(()  => {
      console.log(`El lenguaje de programación ${this.nombre} es fuertemente tipado`)
    }, 1000)
  }
}
lenguaje.verTipado()
// Salida: El lenguaje de programación C++ es fuertemente tipado
```
Como mencione anteriormente, this dentro de **setTimeout** es window, como la función a ejecutar es una función de flecha tomará el valor del contexto donde fue creada, en este caso fue creada dentro de la función **verTipado**, esta función para ese momento esta enlazada al objeto lenguaje, por lo que this dentro del  **setTimeout** es el objeto **lenguaje**.

Este tipo de enlazamiento es útil cuando queremos que this haga referencia al contexto externo.

<br/>

## **Conclusión**


Con esto completamos todos los tipos de enlazamiento, y como estos pueden entrar en acción dependiendo de como escribamos nuestro código. Con esto espero que hayas aprendido todo sobre **this** y puedas usarla de una mejor forma en tus aplicaciones. **Si te gustó compártelo en tus redes** y así ayudamos a más personas a entender este concepto tan confuso en javascript. Si tienes alguna duda déjala en los comentarios y te responderé en la brevedad posible.

medium_banner-this-javascript.webp

small_banner-this-javascript.webp

thumbnail_banner-this-javascript.webp

banner-this-javascript.webp

This en javascript es uno de los conceptos más complicados de entender, tiene un comportamiento diferente al this de otros lenguajes de programación como PHP, Java, etc. El valor de this depende del contexto donde se este ejecutando el código.

Andrés D'Amelio

Desarrollador web Front-end

Título

Ubicación

Blog