שימוש ב-React Refs וב-useRef Hook
React משתמשת בגישה דקלרטיבית (declarative). אתם מעדכנים את ה-state, ו-React מעדכנת את ה-UI. זה עובד עבור רוב המשימות.
אבל לפעמים צריך לצאת מחוץ ל-Virtual DOM. ייתכן שתצטרכו לגשת ישירות לאלמנט HTML אמיתי. כאן נכנסים לתמונה ה-Refs וה-useRef hook.
What is a Ref? Ref הוא מצביע (pointer). הוא מחבר את React ישירות לצומת (node) DOM טבעי.
Why use useRef instead of useState? עדכוני state מפעילים re-render. זה אומר ש-React מציירת מחדש את הקומפוננטה על המסך. עדכוני Ref אינם מפעילים re-render. זה הופך אותם למושלמים עבור ערכים שמשתנים אך אינם צריכים להופיע ב-UI באופן מיידי.
Common use cases: • מיקוד (focus) אוטומטי בשדה קלט. • שליטה באלמנטים של וידאו או אודיו (play/pause). • מדידת הרוחב או הגובה של אלמנט. • שמירת מזהי (IDs) של טיימרים עבור intervals או timeouts.
How to use useRef:
- ייבוא useRef מתוך React.
- אתחול: const myRef = useRef(null).
- חיבור לאלמנט: .
- גישה לערך באמצעות: myRef.current.
Example 1: Auto-focusing an input כאשר משתמש נכנס לדף, תרצו שהסמן יהיה בתוך תיבת הטקסט. משתמשים ב-useEffect כדי לקרוא ל-myRef.current.focus() לאחר שהקומפוננטה עוברת mount.
Example 2: A Stopwatch אם תשמרו setInterval ID בתוך ה-state, הקומפוננטה תבצע re-render בכל פעם שהטיימר מתקתק. זה איטי. אם תשמרו את ה-ID בתוך ref, הקומפוננטה תישאר מהירה. הערך נשמר בצורה בטוחה לאורך ה-renders מבלי לגרום לעבודה נוספת לדפדפן.
State vs Ref: • State: מפעיל re-render. משמש לנתוני UI. העדכונים הם אסינכרוניים (asynchronous). • Ref: ללא re-render. משמש לגישה ל-DOM ולזיכרון. העדכונים הם סינכרוניים (synchronous).
Pro Tips for Seniors: • הימנעו משימוש יתר. השתמשו ב-refs רק כאשר הלוגיקה הדקלרטיבית אינה מספיקה. • ניקוי זיכרון. תמיד נקו intervals או event listeners בתוך פונקציית ה-cleanup שלכם. • אל תכתבו ל-refs במהלך ה-rendering. עדכנו את ref.current רק בתוך useEffect או בתוך event handlers. זה מונע side effects. • השתמשו ב-forwardRef. אם ברצונכם להעביר ref לקומפוננטת ילד (child component) מותאמת אישית, עליכם לעטוף את הילד ב-React.forwardRef.
Source: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde