نوشته های Farnaz Khoshgoftar

Code review etiquette

Farnaz Khoshgoftar — Thu, 04 Apr 2024 02:43:33 +0330

Greetings! In this article, I will provide a concise overview of code review etiquette, based on personal experiences and relevant articles. Reviewer Guidelines:Clearly express your comments:When requesting modifications, provide specific details about the necessary changes for approval, such as highlighting a particular code snippet.Use references in code reviews, if needed:Consider including links to articles or Stack Overflow threads for clarity.Be suggestive, not decisive:Frame your comments as questions, for example: "What do you think about naming this user_id?” is nicer than "You should rename this variable to user_id", or use phrases like "Please consider..." instead of imposing directives. This approach encourages inquiry over criticism, fostering a friendlier atmosphere.Positive feedback in code reviews:Recognize impactful modifications, like refactoring, code improvements and clean code, to cultivate a culture of appreciation. For example, "Wow! That's an amazing change!"Code reviews for continuous improvement:Embrace code reviews for collaborative learning and knowledge exchange. Cultivate a culture where constructive feedback is shared to help colleagues enhance their skills.Silent approval in code reviews:When genuinely impressed by code modifications, express succinct approval with a comment like "Looks good to me; I have nothing to comment on."Maintaining scope in code reviews:Please comment on new code changes. Avoid involving authors in already-bad code unless directly related to the feature at hand.Phrasing of your code review comments:Online communication can create misunderstandings, leading to hurt feelings during code reviews, provide actionable feedback by avoiding subjective statements like "I don't like it" or "This is bad.", and focus on specific, constructive suggestions.Comment prefixes:Utilizing these prefixes can help streamline the code review process and foster constructive feedback exchange among team members.FYI: FYI is the abbreviation for "for your information.", A suggestion or informational note intended to enhance code quality or understanding without imposing a strict requirement. It offers an alternative solution.Convention: Identifying code that deviates from established organizational standards. Ideally this would be enforced automatically with a linter or some other tool.Nit: A nit is a small, insignificant issue spotted during a code review process that doesn't have a major impact on the overall quality of the code.Optional: Suggesting an idea that may enhance the code but is not obligatory to implement.Author Guidelines:Break down your changes to the smallest functional units:Optimize efficiency by breaking down PRs into manageable units, making the review more straightforward and enhancing the accuracy of the evaluation.Fixing code comments with flexibility:Embrace a positive mindset during code review process by understanding that comments are directed at the code, not personal critique.Respond to every comment for comprehensive improvement:Promote active engagement in the code review process by responding to each comment, including those that may not align with your initial preferences.Acknowledging and implementing reviewer suggestions:Foster a positive code review culture by expressing gratitude for reviewer suggestions. For example If you agree with the comment, you can say: "Great decision. I'll implement that change."Share the design doc ahead of review for large features:This method enhances code comprehension for the reviewer.Avoid adding unnecessarily large number of reviewers:Selecting a focused and relevant group of reviewers, ensures concise and effective feedback.I hope this article proves to be valuable for you and I welcome your feedback.

useTransition vs useDeferredValue | React 18

Farnaz Khoshgoftar — Sat, 16 Jul 2022 18:36:39 +0430

-اول باید بدونیم concurrency چیه؟ React 18 یه مفهوم جدید به نام concurrent rendering رو ارائه داده که یعنی توانایی انجام چندین کار به طور همزمان. قبلا React تغییرات state هایی که همزمان اتفاق می افتادند رو گروه بندی میکرد و یکباره (به جای چند بار، یکبار بعد از هر تغییر state) کامپوننت رو rerender میکرد. که بهش Render-blocking گفته میشد اما الان concurrent Mode معرفی شده.بریم سراغ یه مثال( این مثالو تو یه مقاله خوندم و جالب بود پس به شما هم میگم :) )فرض کنید در حین نوشتن این مقاله من دارم همزمان غذا هم میپزم و الان زمان اضافه کردن مواد به غذاس (این کار ضروری تره پس الان میرم سراغ اون) پس از نوشتن دست میکشم و میرم تا مواد رو به غذا اضافه کنم بعد از تموم شدن کارم میام و نوشتن مقالمو ادامه میدم یعنی توی مراحل مختلف تمرکز من روی موارد ضروری تره. کل داستان concurrent rendering در React با استفاده از useTransition و useDeferredValue قابل استفاده است پس بریم یادشون بگیریم.-useTransition-اول باید بدونیم useTransition چیه؟ بعضی از به‌روزرسانی‌های UI باید در سریع‌ترین زمان ممکن انجام بشه (مثل تایپ کردن تو یه input ، انتخاب یک value از dropdown ) در حالی که بعضی های دیگه میتونن اولویت کمتری داشته باشن (مثل فیلتر کردن یک لیست). قبل از React 18 ابزاری برای اولویت بندی به روز رسانی های UI نداشتیم اما خوشبختانه، React 18 به ما این امکان رو میده که به‌روزرسانی‌های UI رو اولویت بندی کنیم.حالا useTransition به React میگه که بعضی از setState ها اولویت پایین‌تری دارن و فوری نیستنبریم سراغ سینتکسش :const [isPending, startTransition] = useTransition();وقتی که ما useTransition رو فراخوانی می کنیم، یک آرایه با دو تا عنصر دریافت می کنیم: که اولیش یه مقدار بولین به نام isPending هست.(زمانی که تابع startTransition در حال اجراست true میشه و وقتی اجراش خاتمه پیدا میکنه false میشه) و دومیش تابع startTransition هست که باهاش setState ای رو که به روز رسانیش اولویت کمتری داره wrap میکنیم.بریم سراغ یه مثال : وارد این لینک شوتو این مثال یه لیست از محصولات و یه اینپوت برای سرچ کردن داریم. وقتی اسم محصول رو سرچ میکنیم اگر در لیست وجود داشته باشه لیست فلیتر میشه. وقتی به سرعت یه اسم رو توی اینپوت سرچ میکنیم متوجه تاخیر تو تایپ کردن میشیم.در صورتی که به روز رسانی اینپوت موقع تایپ کردن، یک کار فوریه و باید سریع انجام بشه. اما به روز رسانی لیست، یه کار سنگین و غیر فوریه ( این کار سنگین و غیر فوری، کار فوری و سبک رو کند میکنه). (راستی موقع تایپ کردن توی اینپوت، اگر سیستم کندی دارید متوجه این تاخیر میشید اما اگر سیستمتون خفنه :) این تاخیر رو نمیبینید پس inspect بگیرید و وارد تب performance بشید و از قسمت cpu گزینه 6x slowdown رو انتخاب کنید این کار cpu رو ۶ برابر کند میکنه. اینطوری کندی رو موقع تایپ کردن احساس میکنید)-حالا چجوری این مشکلو حل کنیم؟ با استفاده از useTransition به React اطلاع میدیم که کدوم به‌روزرسانی‌های UI فوری هستن و کدوم غیر فوری. فقط کافیه توی codesandbox خط ۲۲ و همچنین خط ۲۵ تا ۲۷ رو از کامنت در بیارید (خط ۲۸ هم پاک کن دیگه بهش نیاز نداریم). راستی خط ۳۴ هم اگر از کامنت در بیاری میبینی با استفاده از isPending داریم یه پاراگراف رو نمایش میدیم.-ما الان دقیقا چکار کردیم؟ وقتی به روزرسانی state از الویت کمتری برخورداره، با startTransition به روز رسانی state رو wrap میکنیم. بعد از این کار، فیلتر شدن لیستمون با سرچ کاربر sync نیست و مثلا ممکنه کاربر کلمه سرچ شده رو پاک کنه و اینپوت خالی باشه اما بعضی از نتایج رو در لیست ببینه (یعنی فیلتر شدن لیست عقب مونده) و این دقیقا همون کاریه که startTransition انجام میده ( به React گفتیم به روزرسانی لیست الویت کمتری نسبت به به روزرسانی اینپوت داره )-کی ازش استفاده کنیم‌؟ وقتی رابط کاربری کندی داریم (مخصوصا توی دستگاه قدیمی تر) و مثلا نمیتونیم چنین فیلتر هایی رو سمت سرور هندل کنیم و باید سمت کلاینت انجام بشه. -useDeferredValue -چی هست اصلا؟ useDeferredValue دو تا آیتم به عنوان ورودی می گیره، در واقع یک مقدار رو دریافت می کنه و بعد از timeout خاصی اون رو برمی گردونه. به این صورت: const deferredValue = useDeferredValue(value, { timeoutMs: 2000 }); وقتی که value ارسال شده به useDeferredValue تغییر می کنه، بسته به اولویت render فعلی، مقدار قبلی یا مقدار جدید رو برمی گردونه. اگر رندر فعلی نتیجه یه به‌روزرسانی فوری باشد(مثل تایپ کردن در اینپوت)، React مقدار قبلی رو برمی‌گردونه. و بعد از اتمام render فعلی، به مقدار جدید تغییر پیدا میکنه. به گفته Dan Abramov عزیز: زمانی از useDeferredValue استفاده میکنیم که دیتا از لایه های بالاتر بیاد و ما کنترلی بر فراخوانی setState مربوطه نداریم. توی مثالی که زدیم ما این کنترل رو داریم، اما بیاید شبیه سازی کنیم که نداریم :)) فقط کافیه توی codesandbox، چیزهایی که قبلا گفتم از کامنت در بیاری رو دوباره کامنت کنی و داخل کامپوننت ProductList، این کد رو جایگزین کد فعلی کنی.import { useDeferredValue } from "react" function ProductList({ products }) { const deferredProducts = useDeferredValue(products); return (

{product}

);} export default ProductList;-خلاصه: useTransition کد مربوط به setState رو wrap میکنه. در حالی که useDeferredValue هنگام دریافت دیتا از یک لایه های بالا، مقداری که تحت تاثیر تغییر state قرار می گیره رو wrap میکنه. شما نباید از هر دو به طور همزمان استفاده کنید چون هر دوشون یه کار رو انجام میدن. اگر به کد مربوط به به‌روزرسانی state دسترسی دارید و به‌روزرسانی‌ state از اولویت کمتری برخورداره، منطقیه که از useTransition استفاده کنید و اگر دسترسی ندارید از useDeferredValue استفاده کنید. در کل اگر رابط کاربری خوبی ندارید و نمیتونید به روش دیگه ای بهینه اش کنید از این Hook ها استفاده کنید. (منظورم از روش های دیگه:lazy loading و pagination و هندل کردن فیلتر سمت سرور و ... است.)

useMemo vs useCallback

Farnaz Khoshgoftar — Thu, 07 Jul 2022 22:03:49 +0430

-useMemo-اول باید بدونیم useMemo چیه ؟ یه React hook هست که به عنوان آرگمان اول یه function و به عنوان آرگمان دوم یه آرایه از dependency ها میگیره . در طول رندر اولیه، useMemo فانکشن رو فراخوانی می‌کنه و نتیجه حاصل از اجرای function رو برمیگردونه و توی حافظه ذخیره میکنه . اگر در طول render های بعدی، dependency ها تغییر نکنه، useMemo فانکشن رو فراخوانی نمی کنه و فقط مقدار ذخیره شده رو برمی گردونه.بریم سراغ یه مثال ، وارد این لینک بشیدتوی App.js یه input داریم برای نوشتن و یه دکمه که هر وقت روش کلیک کنی counter یکی زیاد میشه و یه ChildComponent داریم که count , incrementCount رو به عنوان props بهش پاس میدیم.وقتی داخل input چیزی مینویسیم یا وقتی رو دکمه Increment کلیک میکنیم متوجه تاخیر زیادی میشیم-دلیلش چیه ؟ توی این مثال ما یه فانکشن سنگییییین داریم :))‌‌ به اسم expensiveFunction که ۲ تا کار انجام میده یه for loop توش نوشتیم که یه delay ایجاد کنه و اینکه سه برابر count رو برمیگردونه و هر وقت app ما rerender میشه expensiveFunction رو invoke میکنه و همین اتفاق app رو کند میکنه.در واقع expensiveFunction فقط باید زمانی که رو دکمه Increment کلیک میکنیم call بشه نه زمانی که تو input چیزی مینویسیمراه حل : ما باید مقدار بازگشتی expensiveFunction رو memoize کنیم (با استفاده از useMemo عزیزم)فقط کافیه توی خط ۱۷ ام myCount رو اینطوری تعریف کنیconst myCount = React.useMemo(() => {return expensiveFunction(count);}, [count]);-useCallbackاز لحاظ سیتکسی شبیه useMemo هست فقط وقتی که dependency ها تغییر می کنه، function رو برمی گردونه و از rerender شدن غیرضروری جلوگیری میکنه .وارد این لینک بشیدتقریبا مثل مثال بالا توی App.js یه input داریم برای نوشتن و یه دکمه که هر وقت روش کلیک کنی counter یکی زیاد میشه و یه ChildComponent داریم که count , incrementCount رو به عنوان props بهش پاس میدیم.-خب حالا مشکل چیه؟ مشکل اینه که وقتی شما توی input چیزی تایپ میکنی ChildComponent داره بیخودی rerender میشه (یعنی هر وقت App ما rerender بشه ChildComponent هم rerender میشه) در صورتی که فقط اگر روی دکمه Increment کلیک شد باید rerender بشهبرای جلوگیری از این اتفاق باید از useCallback استفاده کنیمفقط کافیه کد خط پایین رو جایگزین خط ۹ ام codesandbox کنیconst incrementCount = React.useCallback(() => setCount(count + 1), [count]);-خلاصه :useMemo وقتی که dependency ها تغییر میکنن تابع رو فراخوانی میکنه و یه مقدار ذخیره شده رو برمی گردونه و useCallback وقتی که dependency ها تغییر می کنن تابع ذخیره شده رو برمی گردونه .

()React.memo

Farnaz Khoshgoftar — Wed, 06 Jul 2022 00:15:57 +0430

- اول باید بدونیم memoization چیه ؟ یه تکنیکه که با جلوگیری کردن از render های غیرضروری باعث بهینه سازی performance میشه :)) - حالا چطوری ؟ وقتی با ()React.memo (که یه HOC هست) یه کامپوننت رو wrap میکنیم React کامپوننت رو render میکنه و نتیجه شو memoize میکنه و قبل از render بعدی ،پراپز رو مقایسه میکنه و اگر تغییری نکرده باشه React از نتیجه حفظ شده استفاده می کنه و از rerender شدن جلوگیری میکنه.بریم سراغ یه مثال . وارد این لینک شوتوی App.js یه input داریم برای نوشتن و یه دکمه که هر وقت روش کلیک کنی counter یکی زیاد میشه و یه ChildComponent داریم که count رو به عنوان props بهش پاس میدیم - خب حالا مشکل چیه؟ مشکل اینه که وقتی شما توی input چیزی تایپ میکنی ChildComponent داره بیخودی rerender میشه (یعنی هر وقت App ما rerender بشه ChildComponent هم rerender میشه) در صورتی که فقط اگر روی دکمه Increment کلیک شد باید rerender بشه- راه حل چیه؟ React.memoفقط کافیه توی خط ۲۷ ام codesandbox با استفاده از React.memo کامپوننتو wrap کنی const ChildComponent = React.memo(({ count }) => { console.log("child component is rendering"); return (

This is a child component.

Count: {count}

); });-کی ازش استفاده نکنیم؟ وقتی کامپوننتمون زیادی سنگین نیست و معمولاً با props های مختلف render میشه، به احتمال زیاد به ()React.memo نیازی نداریم.در آخر باید بگم که این اولین مقاله من هست و پذیرای هر گونه پیشنهاد و انتقادتون هستم :))