آموزش React
هوک‌ها به React اجازه می‌دهند تا state و سایر ویژگی‌ها را به درستی به کامپوننت تابعی مربوطه متصل کند. این کار به نظر جادویی می‌رسد، اما این جادو بر پایه چند قانون ساده و سخت‌گیرانه استوار است. رعایت نکردن این قوانین می‌تواند منجر به باگ‌های گیج‌کننده‌ای شود که دیباگ کردن آنها دشوار است. خوشبختانه، ابزارهای linter مدرن (مانند پلاگین ESLint برای React) به صورت خودکار این قوانین را بررسی کرده و به شما هشدار می‌دهند.
هرگز هوک‌ها را در داخل حلقه‌ها، شرط‌ها، یا توابع تودرتو فراخوانی نکنید. هوک‌ها باید همیشه در سطح بالای کامپوننت تابعی شما، قبل از هر return زودهنگامی، فراخوانی شوند.
React برای ردیابی state مربوط به هر هوک، به ترتیب فراخوانی آنها متکی است. تا زمانی که ترتیب فراخوانی هوک‌ها در هر بار رندر یکسان باشد، React می‌تواند state صحیح را به هر کدام از آنها اختصاص دهد.
JAVASCRIPT (React) - Incorrect
// 🔴 Don't call Hooks inside conditions
if (name !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', name);
});
}
در این کد نادرست، هوک useEffect تنها زمانی فراخوانی می‌شود که name خالی نباشد. این کار ترتیب فراخوانی هوک‌ها را در رندرهای مختلف به هم می‌زند و باعث بروز باگ می‌شود.
شرط خود را به داخل هوک منتقل کنید.
JAVASCRIPT (React) - Correct
// ✅ Call Hooks at the top level
useEffect(function persistForm() {
if (name !== '') {
localStorage.setItem('formData', name);
}
});
هوک‌ها را از توابع جاوااسکریپت عادی فراخوانی نکنید. شما تنها می‌توانید هوک‌ها را از دو مکان فراخوانی کنید:
JAVASCRIPT (React) - Incorrect
// 🔴 Don't call Hooks in regular JavaScript functions
function logState() {
const [value, setValue] = useState(''); // This will not work!
console.log(value);
}
این قانون تضمین می‌کند که تمام منطق stateدار یک کامپوننت، به وضوح در داخل خود آن کامپوننت یا هوک‌های سفارشی که استفاده می‌کند، قابل مشاهده باشد.
در این درس، با دو قانون اساسی و حیاتی برای استفاده از هوک‌ها آشنا شدیم. این قوانین به React اجازه می‌دهند تا به درستی کار کند و رعایت آنها به شما کمک می‌کند تا از بروز خطاهای پیچیده و غیرمنتظره جلوگیری کنید.
با این درس، فصل «توانمندسازی اپ‌های وب با هوک‌ها» به پایان می‌رسد. شما اکنون نه تنها با هوک‌های اصلی مانند useState، useEffect، useRef و useMemo آشنا هستید، بلکه می‌دانید چگونه با ساخت هوک‌های سفارشی، منطق را به اشتراک بگذارید و با رعایت قوانین هوک‌ها، کدهای پایدار و قابل اعتمادی بنویسید. در فصل بعدی، به «مدیریت رویدادها در ری‌اکت» خواهیم پرداخت و با جزئیات بیشتری نحوه واکنش به تعاملات کاربر را بررسی خواهیم کرد.