como usar react refs? string refs, callback refs, create ref, use ref

REACT REFS

Refs en react son una tecnica que nos permite obtener una referencia a un component o un elemento y utilizarla para accesar propiedades sobre el componente o elemento. Existen diferentes formas de utilizar refs entre ellas estan: string refs, callback refs, create ref API, useRef. Todas cumplen el mismo proposito pero lo hacen de formas diferentes.

El siguiente tipo de ref es callback ref, este no esta deprecado asi que lo puedes utilizar pero toma en cuenta que existe una forma nueva que react recomienda que veremos en un momento. Callback ref es la idea de asignar una funcion como ref para poder obtener la referencia al componente o elemento.

Por ultimo estan los refs utilizando useRef. En realidad esto es identico a utilizar createRef API, pero es la version que fue creada para trabajar con hooks. Sin embargo funcionan de la misma manera que createRef.

=========================================================
React docs refs:

Github Link:

[thebetoxpro]

Gracias Leo, tenia mucha duda de como manejar el DOM y con esto me quedo claro, gracias

[d-landjs]

Excelente maestro, super entendible!!!

[code_castle]

Gracias, hace un tiempo tuve un problema usando ref para los input de antd que la idea era al cargar el formulario ya el focus estuviera en señalando el primer input... Y ps no logré hacerlo y busque otra manera.
Gracias a esta explicación trataré de hacerlo nuevamente. Gracias. 😎

[tuttodev]

Refs puede asociarse a un document.getElementById de vanilla javascript ?

[xavigonzalez]

excelente video. bro.. cuando haces un video con los hooks de memo y callback

[idouze]

Se puede hacer ref dinámicos en iteradores?

[Alexmontoyaangel]

Que buen tutorial!
Amigo ¿ como se llama esa extension que te resalta la indentacion en colores ?


Gracias de ante mano

[rodrigoalejandrorochadiaz]

Muy buen video Leo, ¿entonces el uso de ref puede sustituir a formik?

[facundocalle]

Hola amigo, tengo una duda quiero usar ref={register({ required: true, maxLength: 10 })} para hacer validaciones, pero no sabria como pasar el ref de un componente creado a otro que es donde lo uso y ahi hacer la validacion osea, yo creo un const button con ciertas propiedades y luego en otro form uso el <button/> y le debo pasar ref={register({ required: true, maxLength: 10 })} para hacer la validacion. Ejemplo:


const Inpunt()
<div>
<input />
</div>
....




const form = () =>{
<Inpunt ref={register({ required: true, maxLength: 10 })}/>
}

[maskarein]

Hola.Gracias por la información de react en general.ero me gustaría, mejor dicho .. como recomendación que en la descripción pongas minuto xx:xx:xx useRef, así uno puede usar como referencia tu vídeo de forma mucho mas rápida.