מדריך ריאקט – react hooks | useRef

עוד hook מוצלח מבית react הוא useRef. פופולארי מאד והשימוש נפוץ כלכך . אך השימוש בו אינו תמיד נכון, הרבה מתכנתים מכירים את הדוגמאות של שימוש ב useRef בשילוב בDOM . ומפספסים את הרעיון של useRe .

מי אתה useRef?

useRef מאד דומה ל useState . אבל יש הבדל אחד משמעותי , שהוא אינו מרנדר את הקומפוננטה, למשל עם תשתמשו בuseState ותרצו לעדכן את את אותו ה state שהגדרתם בכל פעם שהקומפוננטה תתרנדר, יהיה לכם בעיה של infinite loop מכוון שuseState בעצמו מרנדר את הקומפוננטה.

• useRef – כן יכול להתעדכן כל רנדור ברכיב שלכם, ואף ללא רינדור נוסף של האפליקציה.
• useRef יחזיר לנו אובייקט שנראה כך {current: value}

למשל הדוגמה הזו:

import React , {useEffect, useRef} from 'react';
import { JsxElement } from 'typescript';

 function ExUseRef(props : any)  : JSX.Element {
     const count = useRef(0); 

     useEffect(() => {
         count.current = count.current +1;
     })

    return (
        <div>
            <span>get renders count {count.current}</span>
        </div>
    )
}
export default ExUseRef;

הדוגמה באה להמחיש את השוני בין useState אל מול useRef .במידה והייתם רוצים לעשות שימוש בuseState בצורה הזו הייתם נכנסים ללופ אינסופי. בעוד שuseRef עובד בצורה תקינה ומפה אפשר לקחת את היכולות הללו צעד אחד קדימה.

השימושים הנפוצים לעבודה עם useRef

השימושים הנפוצים ביותר ל useRef הם כרפרנס לאלמנטים בHTML. למשל:

import React , {useEffect, useRef} from 'react';
import { JsxElement } from 'typescript';

 function ExUseRef(props : any)  : JSX.Element {
     const inputNameRef = useRef(null); 
   const handleForm = () => {
     console.log(inputNameRef.current)
   } 
   return (
        <div>
        <form>
          <label>Yuor Name:</label>
          <input ref={inputNameRef} type="text" name="first_name" />
          <button type="button" onClick={handleForm}>Submit</button>
        </form>
        </div>
    )
}
export default ExUseRef;

בדוגמה זו בחרתי לשים ref על אינפוט אם כי אפשר לשים אותו על כל תגית HTML . ומה שישמר לנו בתוך inputNameRef יהיה האלמנט הHTML .
וכשנדפיס את inputNameRef , נקבל את האלמנט input. כמובן שאפשר לעשות שימושים שונים במקרה זה כמו למשל focus ועוד..

שימושים בuseRef שלא מומלץ לעשות

בהרבה מקומות ברשת אנשים עושים שימושים פחות טובים ואף אסורים עם useRef ואנשים נופלים לפתרונות אלו. כמו למשל:

1. לשמור מידע בתוך באובטייקט של useRef ולהשתמש בו בDOM . למשל : inputNameRef.current.value = 'something'
2. לעשות appendChild לuseRef.

שימוש נוסף וגם נפוץ שאפשר לעשות עם useRef

שימושים כן טובים בuseRef במקרים כאלו זה למשל לשמור את המידע הקודם שהוקלד באינפוט. (או הערך הקודם שנשמר בסטייט)

import React , {useEffect, useRef, useState} from 'react';

 function ExUseRef(props : any)  : JSX.Element {
     
    const [name , setName] = useState<string | null>(null);
    const inputPrevNameRef = useRef<string | null>(null); 
   
    useEffect(() => {
        inputPrevNameRef.current = name;
    }, [name])
   return (
        <div>
        <form>
          <label>Yuor Name:</label>
          <input onChange={e=>setName(e.target.value)} type="text" value={name?.toString()} name="first_name" />
          <span>Previus has: {inputPrevNameRef.current}</span>
        </form>
        </div>
    )
}
export default ExUseRef;

סיכום useRef

useRef הינו hook נפוץ מאד ובהרבה מקורות תראו שימושים שלא דווקא נכונים , זיכרו שהוק זה דומה מאד לuseState אבל אינו מרנדר את הרכיב כשהוא משתנה. וכן יכול להיות יעיל בשימושים שונים בעובדה עם הDOM. בהוק הבא נדבר על custom hook.

פוסטים קשורים:

מדריך ריאקט – react hooks | useEffect מדריך ריאקט – react hooks | useState מדריך ריאקט – react hooks | useReducer מדריך ריאקט – react hooks | useContext