React Refs અને useRef Hook નો ઉપયોગ કરવો

React એક declarative અભિગમનો ઉપયોગ કરે છે. તમે state અપડેટ કરો છો, અને React UI અપડેટ કરે છે. આ મોટાભાગના કાર્યો માટે કામ કરે છે.

પરંતુ ક્યારેક તમારે Virtual DOM ની બહાર જવાની જરૂર પડે છે. તમારે કદાચ સીધા જ કોઈ વાસ્તવિક HTML element ને સ્પર્શ કરવાની જરૂર પડી શકે છે. અહીં Refs અને useRef hook કામ આવે છે.

Ref શું છે? Ref એ એક પોઇન્ટર (pointer) છે. તે React ને સીધું જ native DOM node સાથે જોડે છે.

useState ને બદલે useRef નો ઉપયોગ શા માટે કરવો? State અપડેટ્સ re-render ટ્રિગર કરે છે. આનો અર્થ એ છે કે React સ્ક્રીન પર component ને ફરીથી દોરે છે. Ref અપડેટ્સ re-render ટ્રિગર કરતા નથી. આ તેમને એવા મૂલ્યો (values) માટે યોગ્ય બનાવે છે જે બદલાય છે પરંતુ તરત જ UI માં દેખાવાની જરૂર નથી.

સામાન્ય ઉપયોગના કિસ્સાઓ: • ઇનપુટ ફિલ્ડને આપમેળે focus કરવું. • વિડિયો અથવા ઓડિયો elements ને કંટ્રોલ કરવા (play/pause). • કોઈ element ની પહોળાઈ અથવા ઊંચાઈ માપવી. • intervals અથવા timeouts માટે timer IDs સ્ટોર કરવા.

useRef નો ઉપયોગ કેવી રીતે કરવો:

  1. React માંથી useRef import કરો.
  2. તેને initialize કરો: const myRef = useRef(null).
  3. તેને element સાથે જોડો: <input ref={myRef} />.
  4. myRef.current દ્વારા તેની value મેળવો.

ઉદાહરણ 1: ઇનપુટને auto-focus કરવું જ્યારે વપરાશકર્તા પેજ પર આવે છે, ત્યારે તમે ઈચ્છો છો કે કર્સર ટેક્સ્ટ બોક્સમાં હોય. component mount થયા પછી myRef.current.focus() ને કોલ કરવા માટે તમે useEffect નો ઉપયોગ કરો છો.

ઉદાહરણ 2: સ્ટોપવોચ (Stopwatch) જો તમે state માં setInterval ID સ્ટોર કરો છો, તો દર વખતે ટાઈમર ટીક થાય ત્યારે component re-render થાય છે. આ ધીમું છે. જો તમે ID ને ref માં સ્ટોર કરો છો, તો component ઝડપી રહે છે. બ્રાઉઝર માટે વધારાનું કામ કર્યા વિના value renders દરમિયાન સુરક્ષિત રહે છે.

State vs Ref: • State: re-render ટ્રિગર કરે છે. UI ડેટા માટે વપરાય છે. અપડેટ્સ asynchronous હોય છે. • Ref: No re-render. DOM access અને મેમરી માટે વપરાય છે. અપડેટ્સ synchronous હોય છે.

Seniors માટે Pro Tips: • વધુ પડતો ઉપયોગ ટાળો. જ્યારે declarative logic નિષ્ફળ જાય ત્યારે જ refs નો ઉપયોગ કરો. • મેમરી ક્લીનઅપ કરો. તમારા cleanup function માં હંમેશા intervals અથવા event listeners ક્લિયર કરો. • rendering દરમિયાન refs માં લખશો નહીં. ફક્ત useEffect અથવા event handlers ની અંદર જ ref.current ને અપડેટ કરો. આ side effects ને અટકાવે છે. • forwardRef નો ઉપયોગ કરો. જો તમે કસ્ટમ child component ને ref પાસ કરવા માંગતા હોવ, તો તમારે તે child ને React.forwardRef માં wrap કરવું પડશે.

Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde