🔺بایدها و نبایدهای memo توی #ری‌اکت

- توی دنیای توسعه #نرم‌افزار تکنیک‌های بهینه‌سازی یک شمشیر دولبه هستن و استفاده نادرست ازشون ممکنه نتیجه عکس بده و برنامه رو غیر بهینه و توسعه رو پیچیده‌تر کنه!

- توی ری‌اکت شاید memo ویژگی خیلی قدرتمندی به حساب بیاد و کمک ‌کنه از رندرهای اضافی جلوگیری کنیم، اما قبل از استفاده از اون باید نکته‌هایی رو در نظر داشته باشیم، که توی این پست اونها رو بررسی می‌کنیم:
ditty.ir/567

#react

ریویو پروژه NextJS
توی این جلسه یک پروژه تو این جلسه یک پروژه NextJS رو با هم ریویو می‌کنیم.

مشاهده ویدئو

درباره ماب ریویو:
ماب ریویو یه رویداد دوستانه و خودمونی برای انتقال تجربه دانشه.
توی این رویداد دور هم جمع می‌شیم تا یک سورس کد رو با هم ریویو کنیم و درباره پرکتیس‌های بهتر و دلایلش صحبت کنیم.

مباحث:
00:00 درباره ماب ریویو
01:30 خواهش دومم
02:40 درباره پروژه
03:37 وابستگی ها
05:33 مسئله Dead Code و Zombie Code ها
10:10 سلامتی وابستگی ها
11:46 کدهایی که مردن رو پاک کنید!
15:22 چطوری یک خط خالی توی کد روی استخدام شدن شما تاثیر می‌ذاره؟
31:30 اضافه کردن فرمتر و لینتر
33:03 از public چیزی ایمپورت نکنید
34:47 کی و چطوری باید کامپوننتمون رو بشکنیم؟
42:35 مسئله useless fragment
43:51 یکپارچگی پیاده سازی و اسم گذاری
45:15 مسئله layout
48:04 مسئله اسم گذاری
53:46 بررسی کامپوننت Banner
55:11 چرا نباید از z-index و overflow زیاد استفاده کنید
55:54 تعداد خط‌های کامپوننت Code Smell حساب می‌شه.
57:42 نحوده درست مدیریت z-index
59:51 اصل Single Responsibility تو فرانت اند
01:02:52 چه چیزهایی رو نباید توی کامپوننت برد؟
1:08:55 درک مسئله Spacing
1:11:07 پیاده سازی درست تم dark و light با taildinw
1:16:23 انکپسوله کردن مسئولیت های کامپوننت ها
1:20:07 کی از margin استفاده کنیم کی از padding
1:22:00 از grid و flex تو در تو استفاده نکنید.
1:27:34 به CSS فحش ندیم
1:28:32 فرق بین space و gap توی tailwind
1:30:25 جمع بندی

#fullstacksjs #mobreview #css #react #typescript #nextjs

🔺جزییات و نکات پیاده‌سازی تکنیک‌های Debounce و Throttle توی ری‌اکت

- این دو از تکنیک‌های پرکاربرد بهینه‌سازی و افزایش سرعت و کیفیت هر برنامه‌ای هستن و به قول معروف برای Rate Limiting به کار میرن

- تکنیک Debounce تضمین می‌کنه یک قطعه کد زمانی اجرا بشه که یک مدت زمان مشخصی از آخرین تلاش برای اجرای اون گذشته باشه. مثلاً یک تابع ده بار پشت سر هم فراخونی میشه، اما می‌خوایم اجرای واقعی اون موقعی باشه که ۵ ثانیه از آخرین فراخونی گذشته باشه.
آشنایی با این تکنیک:
ditty.ir/577

- تکنیک Throttle هم تضمین می‌کنه که کدهای ما توی یک بازه زمانی مشخص فقط یک بار اجرا بشن. مثلاً می‌خوایم یک تابع توی هر بازه زمانی ۵ ثانیه فقط یک بار اجرا بشه. پیاده‌سازی این تکنیک:
ditty.ir/573

#react

دیدید ۹۰٪ سوالات اینه که؛
- کتاب X یا Y کدوم رو بخونم ؟
+ هردو
- خیلی زیاده
+ یکیش رو بخون، بعد اون یکی رو skim کن
- راه دیگه نداره
+ تغییر رشته بده

LinkedIn Post

این پست، برای پروژه‌ اون موقع من هست.
دوستان بدون تعارف می‌گم توی کار ما shortcut وجود نداره بجای اینکه سر پروژه یا مصاحبه خفت بشید و برگردید از صفر خوندن یکبار راه درست رو برید.

یه نویسندهٔ جدید و خوش ذوق به دیتی اضافه شده به اسم امیررضا 😉🔥

- بیشتر درباره ری‌اکت می‌نویسه. از پست‌هاش استفاده کنین:

- هرچیزی که باید از کاستوم هوک ها بدونیم
- هدف از ساخت Suspense کامپوننت‌ها چیه؟
- هرچیزی که باید از هوک useDeferredValue بدونیم
- چه روش‌هایی برای دیباگ کردن برنامه ری‌اکتی می‌شناسین؟

#react

React Native Isn't as Popular as You Think
https://youtu.be/E3Yjx0fFeaA

#react

‏بعضی وقتا ‎#React به یه جایی میرسوندت که کل پروژه رو بیاری پایین از اول با VanillaJS بزنی . چه خوب بود اون دوران بی فریمورک و بی ریا چند سال پیش

<Sohrab/>

@DevTwitter

📚معرفی Zod
یه کتابخونه فوق‌العاده برای اعتبارسنجی (Validation) داده‌هاست که باهاش می‌تونید قوانین دقیق و تایپ‌سیف تعریف کنید.

📦 نصب Zod

npm install zod 
# yarn add zod
# pnpm install zod

💠 نمونه کد

import { z } from "zod";

const userSchema = z.object({
  username: z.string().min(3, "Username must be minimum 3 characters"),
  age: z.number().int().positive("Age must be positive"),
  email: z.string().email("Email is invalid."),
  password: z.string().min(6).refine(val => /[A-Z]/.test(val), {
    message: "Password must be at least 6 characters and contain both uppercase and lowercase letters.",
  }),
});


try {
  userSchema.parse({
    username: "ali",
    age: 25,
    email: "[email protected]",
    password: "Secret1",
  });
  console.log("Validation successful.");
} catch (e) {
  console.log(e.errors);
}

💠 استفاده از Zod با React Hook Form
ابتدا بسته‌های زیر را نصب کنید:

npm install react-hook-form @hookform/resolver
# yarn add react-hook-form @hookform/resolver
# pnpm install react-hook-form @hookform/resolver

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

function MyForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}

      <input type="password" {...register("password")} placeholder="Password" />
      {errors.password && <p>{errors.password.message}</p>}

      <button type="submit">Login</button>
    </form>
  );
}

🔗 https://zod.dev

#Zod #Validation #FrontEnd #React
@SoniaNotes

React Compiler is stable

https://react.dev/blog/2025/10/07/react-compiler-1

#react #compiler #news

با React Share بیشتر آشنا بشید ☃️

کتابخونه‌ی react-share یکی از کتابخونه‌های محبوب ریکته که برای اضافه‌کردن دکمه‌های اشتراک‌گذاری، در شبکه‌های اجتماعی مثل تلگرام، واتساپ، توییتر، لینکدین، فیسبوک و ... استفاده میشه.

ویژگی‌های کتابخانه React Share

⚡️ پشتیبانی از شبکه‌های اجتماعی مختلف

⚡️ آیکون‌های SVG با قابلیت شخصی‌سازی

⚡️ بسیار کم حجم و سریع


🔗 Document

#react_share
@CodeModule @CodeModuleGap

Dead Framework Theory

https://aifoc.us/dead-framework-theory/

#article #ai #react

Absolutely everything you need to know about act() in React tests

#react #act #test