טיפ ריאקט: איך לא להשתמש ב useDeferred
מצב Concurrent Mode החדש של ריאקט פותח אופציה להרבה שיפורי ביצועים, אבל כמו כל פיצ'ר חדש גם קל להתבלבל ולהשתמש בו לא נכון.
נתבונן בקוד הבא:
function BrokenHugeList() {
const [search, setSearch] = useState('');
const deferredSearch = useDeferredValue(search, { timeoutMs: 5000 });
function handleChange(e) {
setSearch(e.target.value);
}
console.log(`1 seach = ${deferredSearch}`);
const searchResults = items.filter(i => i.includes(deferredSearch));
console.log('2');
return (
<div>
<input type="text" value={search} onChange={handleChange} />
<ul>
{searchResults.map(i => <li key={i}>{i}</li>)}
</ul>
</div>
);
}
הקוד משתמש ב useDeferredValue במטרה לשפר ביצועים. המחשבה היא שמשתמשים יקלידו טקסט בתיבה, ואז יהיה render נוסף שבעקבותיו המערכת תנסה לצייר על המסך את הפריטים שמתאימים לחיפוש, ואז באמצע הציור משתמש יקליד ערך אחר בתיבה וריאקט יוכל להפסיק את כל העבודה שלו, לזרוק לפח את מה שהוא רצה לצייר על המסך ולהתחיל מחדש עם הטקסט המעודכן.
וזה באמת מה שקורה רק שצריך לזכור שתי נקודות שבסוף יכולות לפעול לרעתנו:
כדי לדעת מה לצייר בהתחלה, ריאקט כן מפעיל render נוסף עם הערך הישן של טקסט החיפוש. זה אומר שכשנסתכל במסך כלי הפיתוח אנחנו נראה את ההדפסה של 1 ו-2 מופיעה פעמיים אחרי כל שינוי טקסט, פעם אחת עם הטקסט הישן ופעם שניה עם החדש.
ריאקט בכל מקרה לא קוסם ולא יצליח "לעצור באמצע" את לולאת ה filter שאני כתבתי. בגלל זה כשהרשימה מספיק גדולה או שרוב העבודה היא חישובית, אנחנו עדיין נראה lag-ים.
שילוב שתי הבעיות אומר שאם יש לנו לוגיקה מסובכת, לא רק ש useDeferredValue לא יעזור הוא אפילו יזיק. בגלל שאותה לוגיקה מסובכת תופעל פעמיים: פעם אחת עם הסטייט הישן ופעם שניה עם החדש.
פיתרון אחד להפעלה הכפולה הוא להשתמש ב Memo, לדוגמה הקוד הבא לא סובל מבעיית רנדר כפול ונותן תוצאה קצת יותר מהירה:
const HugeList = React.memo(function HugeList(props) {
const { search } = props;
console.log(`3, search = ${search}`);
const searchResults = items.filter(i => i.includes(search));
console.log('4');
return (
<div>
<ul>
{searchResults.map(i => <li key={i}>{i}</li>)}
</ul>
</div>
);
});
function App() {
const [search, setSearch] = useState('');
const deferredSearch = useDeferredValue(search, { timeoutMs: 5000 });
function handleChange(e) {
setSearch(e.target.value);
}
return (
<>
<input type="text" value={search} onChange={handleChange} />
<HugeList search={deferredSearch} />
<hr />
</>
);
}
נ.ב. גם אחרי השינוי, העבודה עם 50 אלף פריטים אומרת שמהירות התגובה של הקומפוננטה לא תהיה מזהירה, אבל עם כמה אלפים או אפילו 20 אלף פריטים שימוש ב useDeferredValue כן יכול לתת שיפור מורגש בזמני התגובה.