نوشته های مهدی فرجی

راهنمای useEffect و Cleanup توی React

مهدی فرجی — Mon, 23 Feb 2026 17:20:20 +0330

React useEffect hook cleanupببین وقتی توی React از useEffect استفاده میکنیم، معمولاً داریم یه کار جانبی انجام میدیم. مثلا:تایمر میذاریمبه یه event گوش میدیمدرخواست API میزنیمWebSocket باز میکنیمsubscription میسازیمحالا نکته مهم چیه؟اینه که وقتی کامپوننت از بین میره (Unmount میشه) یا دوباره قراره effect اجرا بشه، باید اون چیزایی که ساختیم رو پاک کنیم.اگه پاکشون نکنیم چی میشه؟اپ کند میشهmemory leak میخوریمارورهای عجیب میادstate روی کامپوننتی که دیگه وجود نداره ست میشهاصلاً Cleanup یا همون پاک کردن چیه؟ساختار useEffect اینجوریه:useEffect(() => { // کار اصلی اینجاست return () => { // این قسمت همون cleanup هست }; }, []);اون تابعی که داخل return برمیگردونی، همون تمیزکاریه. React هر وقت بخواد effect رو ببنده یا دوباره اجرا کنه، اول cleanup قبلی رو صدا میزنه.تایمر گذاشتی؟useEffect(() => { const interval = setInterval(() => { console.log("hello"); }, 2000); return () => clearInterval(interval); }, []);اگه clearInterval نزنی، حتی بعد از اینکه از صفحه رفتی بیرون، تایمر همچنان اجرا میشه.بعد میگی چرا لاگ هنوز میاد؟ چرا باتری خالی میشه؟ چرا اپ کند شده؟هر setInterval یا setTimeout = حتماً clear کنEvent Listener ساختی؟توی React خیلی وقتا به event ها گوش میدیم. مثلا کیبورد:useEffect(() => { const showSub = Keyboard.addListener("keyboardDidShow", () => {}); const hideSub = Keyboard.addListener("keyboardDidHide", () => {}); return () => { showSub.remove(); hideSub.remove(); }; }, []);اگه remove نکنی، بعداً هم اجرا میشه حتی وقتی اون صفحه دیگه وجود نداره. این باعث رفتارهای غیرقابل پیشبینی میشه. هر addListener = یه remove لازم داره.درخواست API زدی؟فرض کن اینو نوشتی:useEffect(() => { fetch("https://example.com") .then(res => res.json()) .then(data => setData(data)); }, []);حالا کاربر سریع از صفحه میره بیرون ولی درخواست هنوز در حال انجامه. وقتی جواب بیاد، میخواد setData بزنه روی کامپوننتی که دیگه وجود نداره.اینجاست که ارور معروف میاد:Can't perform a React state update on an unmounted componentراه حل چیه؟ AbortControlleruseEffect(() => { const controller = new AbortController(); fetch("https://example.com", { signal: controller.signal }) .then(res => res.json()) .then(data => setData(data)) .catch(err => { if (err.name !== "AbortError") { console.error(err); } }); return () => controller.abort(); }, []);اینجوری وقتی صفحه بسته بشه، درخواست هم لغو میشه.WebSocket باز کردی؟اگه WebSocket باز کنی و نبندیش، اتصال همچنان باز میمونه و دیتا رد و بدل میشه.useEffect(() => { const ws = new WebSocket("wss://example.com"); ws.onmessage = (event) => { console.log(event.data); }; return () => { ws.close(); }; }, []);خیلی از باگهای اپهای realtime از همینجا میاد.هر اتصال = یه close لازم دارهچند تا cleanup داری؟بعضی وقتا cleanup شلوغ میشه:return () => { sub1.remove(); sub2.remove(); clearInterval(timer); };میتونی تمیزترش کنی:useEffect(() => { const cleanups = []; const sub = something(); cleanups.push(() => sub.remove()); const timer = setInterval(() => {}, 1000); cleanups.push(() => clearInterval(timer)); return () => { cleanups.forEach(fn => fn()); }; }, []);Cleanup کی اجرا میشه؟دو حالت داره:۱. وقتی کامپوننت Unmount میشه۲. وقتی dependencyها تغییر میکنن و effect قراره دوباره اجرا بشهReact قبل از اجرای effect جدید، اول cleanup قبلی رو اجرا میکنه.چه چیزایی Cleanup نمیخوان؟setState سادهمحاسبات داخل renderچیزایی که subscription یا async نیستنهر چی resource خارجی یا زماندار باشه → cleanup لازم داره.چرا اینقدر مهمه؟چون اگه رعایت نکنی:❌ memory leak❌ کند شدن اپ❌ مصرف زیاد باتری❌ باگهای عجیب❌ state آپدیت روی کامپوننت حذفشدهولی اگه رعایت کنی:✅ اپ تمیز✅ رفتار قابل پیشبینی✅ performance بهتر✅ کد حرفهایترجمعبندیهر چیزی که داخل useEffect راه میندازی از خودت بپرس:اگه این صفحه بسته شد، باید اینو خاموش کنم یا نه؟اگه جواب "آره" بود → حتماً cleanup بنویس. ممنون که خوندی.

چرا youtube-spotlight-extension رو ساختم؟ (داستان یه دردسر همیشگی تو یوتیوب 😅)

مهدی فرجی — Thu, 05 Feb 2026 05:43:23 +0330

Youtube spotlight searchهر روز چند ساعت تو یوتیوب می‌گذرونم: ویدیو آموزشی، تحقیق، کامنت‌خونی، پیدا کردن کانال جدید... ولی هر بار یه چیز اذیتم می‌کرد: پر از نویز و حواس‌پرتی.تبلیغات وسط ویدیو، تبلیغ تو فید، بنرهای تبلیغاتی، ویدیوهای پیشنهادی اسپانسری، عنوان‌ها و تامبنیل‌های بی‌ربط... می‌خواستم فقط روی همون چیزی که برام مهمه تمرکز کنم، نه اینکه تو دریای محتوا گم بشم.پس تصمیم گرفتم یه ابزار بسازم که بالاخره این مشکل رو حل کنه.مشکل همیشگی: یوتیوب پر از حواس‌پرتیهوقتی یوتیوب باز می‌کنی:- تبلیغ قبل ویدیو، تبلیغ تو فید، تبلیغ کنار پخش‌کننده - بخش‌های اسپانسری تو ویدیوها - کلی عنوان و تامبنیل که حواست رو پرت می‌کنه - پیدا کردن یه کلمه خاص یا کانال مورد علاقه‌ت تو این شلوغی خیلی سخته ادبلاکرها (مثل uBlock) یه بخشی از تبلیغات رو حذف می‌کنن، ولی هیچ‌کدوم نمی‌تونن محتوای صفحه رو برات فیلتر کنن یا فقط کانال‌های خاص رو برجسته کنن.راه‌حل‌های موجود کافی نبودن- ادبلاکرها → فقط تبلیغ حذف می‌کنن، نه فیلتر محتوا - افزونه‌های بهبود یوتیوب (Enhancer for YouTube و غیره) → بیشتر کنترل پخش اضافه می‌کنن، نه تمرکز روی محتوا - اسکریپت‌های userscript → معمولاً با shadow DOM یوتیوب و آپدیت‌های مداومش به مشکل می‌خورن - خود یوتیوب هم هیچ گزینه‌ای برای spotlight کردن متن یا کانال نداره چند بار bookmarklet و کدهای دستی زدم، ولی همیشه ناقص بودن و UI خوبی نداشتن.راه‌حل من: youtube-spotlight-extensionیه افزونه سبک کروم ساختم که یه نوار کنترل شیک و متحرک (draggable) روی صفحه یوتیوب اضافه می‌کنه.ویژگی‌های اصلی:- Spotlight متن → هر کلمه‌ای تایپ کنی، بقیه متن‌های صفحه محو می‌شن (opacity ~0.1) → عالی برای جستجوی سریع تو کامنت‌ها، عنوان‌ها یا توضیحات - Spotlight کانال → با یه کلیک فقط اسم کانال‌ها و @handleها روشن می‌مونن، بقیه صفحه کم‌رنگ می‌شه → خیلی راحت می‌تونی کانال‌های مورد علاقه‌ت رو پیدا کنی - حذف تبلیغات یک‌کلیکی → اکثر تبلیغات (فید، بنر، ویدیوهای اسپانسری، تبلیغات پخش‌کننده و ...) فوراً حذف می‌شن - پشتیبانی خودکار از حالت تاریک/روشن یوتیوب - نوار کنترل draggable روی دسکتاپ، ثابت و وسط‌چین روی موبایل - بدون نیاز به بیلد — ZIP آماده رو دانلود کن، Load unpacked کن، تموم!همه کارها تو content script انجام می‌شه — سبک، سریع، بدون overhead زیاد.چطور کار می‌کنه؟ (یه نگاه فنی سریع)- از Shadow Root UI (با کمک WXT) برای نوار کنترل استفاده کردم - MutationObserver برای تشخیص تغییر تم تاریک/روشن - querySelectorAll + تغییر opacity برای dim کردن عناصر - لیست کاملی از سلکتورهای تبلیغات (ytd-ad-slot-renderer، .ytp-ad-module و ...) برای حذف - بدون وابستگی خارجی سنگین — فقط React + WXTکجا ازش استفاده کنی؟تحقیق روی یه موضوع خاص → کلمه کلیدی رو spotlight کن و کامنت‌ها/نتایج رو سریع اسکن کندنبال کردن یه یوتیوبر → حالت کانال رو فعال کن و فقط محتوای اون‌ها رو ببینتماشای بدون تبلیغ → یه کلیک و صفحه تمیز می‌شهمرور سریع → همه چیز رو dim کن جز @منشن‌ها یا عبارت مورد نظرتشروع کاربرو به صفحه Releasesآخرین ZIP رو دانلود کن (پیش‌ساخته، بدون نیاز به npm install)unzip کن → کروم → chrome://extensions/ → Developer mode → Load unpacked → پوشه رو انتخاب کنیوتیوب رو باز کن — نوار spotlight ظاهر می‌شه!ریپو: https://github.com/1mehdifaraji/youtube-spotlight-extensionحرف آخربعد از ساخت و استفاده از این افزونه، واقعاً حس می‌کنم یوتیوب تمیزتر و هدفمندتر شده. دیگه تو نویز گم نمی‌شم و دقیقاً می‌رم سراغ چیزی که می‌خوام.اگه تو هم از یوتیوب زیاد استفاده می‌کنی و از شلوغی خسته شدی، حتماً امتحانش کن.یه ⭐ روی گیت‌هاب خیلی انرژی می‌ده! 😍ممنون که خوندی — بریم یوتیوب رو بهتر کنیم! 🔦📺

چرا zustand-mmkv-storage رو ساختم؟ (داستان یه دردسر React Native 😅)

مهدی فرجی — Tue, 30 Dec 2025 08:40:45 +0330

چند ماه پیش، در حال ساخت یک اپلیکیشن React Native با Zustand برای مدیریت حالت بودم. همه چیز عالی به نظر می‌رسید API ساده، بدون boilerplate زیاد، تجربه توسعه فوق‌العاده.اما وقتی نوبت به ذخیره‌سازی حالت رسید، (مثل توکن لاگین، تنظیمات کاربر، سبد خرید) مشکلات شروع شد.ابتدا از AsyncStorage استفاده کردم. کار می‌کرد... اما کند بود. نوشتن و خواندن داده‌ها گاهی باعث لگ رابط کاربری می‌شد و برای داده‌های حساس هیچ رمزنگاری داخلی نداشت.می‌دانستم MMKV استاندارد طلایی ذخیره‌سازی سریع در React Native است، اما هر بار اتصال دستی آن به persist در Zustand، تکراری و پرخطا بود.پس تصمیم گرفتم یک بار برای همیشه این مشکل را حل کنم و zustand-mmkv-storage متولد شد.مشکل ذخیره‌سازی سنتی در React Nativeدر اپلیکیشن‌های موبایل، ذخیره‌سازی اجباری است:کاربر انتظار دارد تم تاریک/روشن حفظ شودسبد خرید با بستن اپ خالی نشودجلسه لاگین بعد از ری‌استارت گوشی ادامه داشته باشدسال‌ها AsyncStorage راه‌حل پیش‌فرض بود. ساده است و همه‌جا کار می‌کند.اما واقعیت در سال ۲۰۲۵:کاملاً مبتنی بر جاوااسکریپتفقط async که سبب لگ UI میشهبدون رمزنگاریتوسط تیم اصلی React Native منسوخ شدهبنچمارک‌ها نشان می‌دهند MMKV در سناریوهای واقعی ۳۰ تا ۱۰۰ برابر سریع‌تر از AsyncStorage است.کشف MMKV: تغییر دهنده بازی برای عملکردMMKV (توسعه‌یافته توسط Tencent و اکنون توسط Marc Rousavy نگهداری می‌شود) یک ذخیره‌ساز key-value مدرن است که برای سرعت ساخته شده:هسته ++C با binding های JSIخواندن همزمان (بدون await)رمزنگاری داخلیایمن برای multi-process، حجم کم، سازگار با Expoدر اپ‌های بزرگ تولید استفاده می‌شود و توصیه پیش‌فرض برای ذخیره‌سازی با عملکرد بالا شده است.Middleware Persist در Zustandpersist در Zustand فوق‌العاده است فقط store را wrap کنید و سریالایزیشن/هیدراته شدن را مدیریت می‌کند.اما نیاز به یک backend ذخیره‌سازی خوب دارد. اتصال دستی MMKV یعنی:کد تکراریعدم اشتراک‌گذاری هوشمند instanceباگ‌های آسان در هیدراته شدنراه‌حل من: zustand-mmkv-storagezustand-mmkv-storage را ساختم یک آداپتور کوچک (<1KB) که MMKV را مستقیماً با Zustand هماهنگ می‌کند.ویژگی‌هایی که روی آن‌ها تمرکز کردم:Lazy dynamic importGlobal instance cachingپشتیبانی کامل از رمزنگاریچندین store ایزولهبهترین شیوه‌های هیدراته شدن داخلیسازگار با Expo و React Nativeشروع کارnpm install zustand-mmkv-storage zustand react-native-mmkvمثال سادهimport { create } from 'zustand'; import { persist, createJSONStorage } from 'zustand/middleware'; import { mmkvStorage } from 'zustand-mmkv-storage'; export const useCounterStore = create( persist( (set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), }), { name: 'counter', storage: createJSONStorage(() => mmkvStorage), } ) );مثال پیشرفته: توکن لاگین رمزنگاری‌شدهimport { createMMKVStorage } from 'zustand-mmkv-storage'; const encryptedStorage = createMMKVStorage({ id: 'auth-vault', encryptionKey: 'secret', }); export const useAuthStore = create( persist( (set) => ({ token: '', setToken: (token) => set({ token }), }), { name: 'auth', storage: createJSONStorage(() => encryptedStorage), } ) );حالا توکنت روی دیسک رمزنگاری شده و کاملاً جدا از بقیه داده‌هاست.کجا ازش استفاده کنی؟توکن احراز هویتتنظیمات اپ (تم، زبان)سبد خرید آفلاینوضعیت onboardingفیچر فلگ‌هاحرف آخربعد از سوئیچ به zustand-mmkv-storage اپ‌هام واقعاً سریع‌تر شدن دیگه منتظر ذخیره‌سازی نیستم.اگه تو هم Zustand تو React Native استفاده می‌کنی، حتماً امتحانش کن:npm i zustand-mmkv-storageگیت‌هاب - npmخوشت اومد، یه ⭐ روی گیت‌هاب بزن کلی انرژی می‌ده! 😍ممنون که خوندی بریم React Native رو سریع‌تر کنیم🐻✨#react-native #open-source #zustand #mobile-development #mmkv #react-native-storage #persist

مرج و باندل کردن فایل های سواگر swagger

مهدی فرجی — Sun, 01 Sep 2024 14:04:25 +0330

open-api-swaggerتاحالا سعی کردی واسه api با swagger مستند سازی کنی؟روشی که بعد تماشای چندتا آموزش‌ و خوندن مستندات رسمی OPENAPI انجام میدی، کدنویسی تو یه فایل yaml و تعریف اجزا، ریسورس و غیره همه تو همون فایله.در نهایت صدها خط کد تو یه فایل داری که نه خوندنش راحته و پس از مدتی تغییر یا دیباگ کردنش کار ساده ای نیس.و تنها راهی که کار و تجربه توسعه رو راحت میکنه، استفاده از SwaggerHub هستش که رایگان نیست.این روش زیاد اکی نیس، مگه نه؟یه راه بهتری هست اونم اینه که پوشه‌ و فایل‌های yaml خوب نامگذاری بشن و اکسپورت بشن به یه فایل اصلی yaml.اساساً ما همه چی رو به عنوان یک ماژول در نظر می گیریم و اکسپورت می کنیم که بعدش بتونیم ایمپورت کنیم تو یه فایل اصلی.درواقع همه فایل‌هارو باندل می‌کنیم و یک فایل yaml به عنوان داکیونمت سواگر خواهیم داشت.ساختاری که من پیشنهاد می کنم، ایجاد پوشه های جداگونه برای پارامتر ها، ریسورس ها، رسپانس ها و آدرس های api هستش.در نهایت میشه همه ی فایل های yaml رو با این دستور مرج کنیم:npx swagger-cli bundle src/openapi.yaml — outfile _build/openapi.yaml — type yamlابزار swagger-cli همه فایل‌های yaml رو تو یه فایل مرج میکنه که تو پوشه build_ میزارتش.برای دیدن نتیجه کار، می تونی فایل بیلد شده رو کپی کنی و تو ادیتور Swagger پیست کنی.سورس کد کامل رو هم گذاشتم تو گیتهابم میتونی ببینی.