Con la llegada de los Hooks , en React se ha producido un interesante cambio con muchas nuevas características que los desarrolladores podemos aprovechar. Entre ellas se destaca React useRef, una de las funcionalidades sobre las cual más consultas me realizan.
¿Qué se necesita para utilizar React useRef? En principio lo básico: manejar un editor de código (por ejemplo Visual Studio Code), saber programar con JavaScript y React, utilizar una terminal, crear un proyecto y comprender el concepto de Hooks. Con un conocimiento inicial de todos estos ítems nos alcanza para comenzar, pero para aplicarlo en proyectos más grandes es recomendable mayor experiencia con React.
Los Hoks y useRef
La llegada de los Hooks, a partir de la versión 16.8 de React, ha revolucionado la manera en que se programa con esta biblioteca.
Muchas características nuevas nos permite simplificar nuestro trabajo y entre ellas se destaca React useRef, de la que hablaré aquí.
Los Hooks, entre otras cosas, nos permite crear componente sin necesidad de armar clases, pero aprovechando muchas características necesarias para desarrollar una aplicación moderna.
Con el Hook useRef encontramos una manera de acceder a los nodos del DOM o elementos React que son creados en el método Render.
El objeto que se recibe como resultado persiste en el ciclo de vida del componente. Con esto podemos tener valores mutables y podemos actuar con elementos del DOM sin necesidad de disparar nuevamente el Render.
¿Cómo lo incorporamos en nuestro proyecto? El siguiente código nos puede ayudar en ese aspecto:
import {createRef} from 'react' ¿De qué manera lo utilizamos luego? Podemos declarar una constante de la siguiente manera:
const refContainer = useRef(initialValue);Para llamar este Hook dentro del Render, podríamos hacerlo mediante un botón, como vemos a continuación:
<button ref={refContainer}>Clic Aquí para probar</button>Las implementaciones de useRef puede ser variadas, pero es una característica que nos aporta mucho si decidimos trabajar con Hooks y modernizar nuestros proyectos con React o si estamos por comenzar a desarrollar una nueva aplicación utilizando esta librería.
Para saber más
Si todavía no desarrollas con React te recomiendo los siguientes contenidos:
- 🌎 5 características de React que deberías conocer.
- 🌎 ¿Qué es React Native?.
- 🌎 Next.js, un framework basado en React para el lado servidor.
- 🌎 Cómo crear funciones con JavaScript.
- 🌎 5 extensiones y plugins para Visual Studio Code.
- 🌎 Sitio de React.js: https://es.reactjs.org/.
- 🌎 Sitio de Ract Native: https://reactnative.dev/.
⭐ Si te resulta interesante React y te gustaría aprender a trabajar con esta librería escribime para saber más sobre las opciones de capacitación online.
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta