يا هلا بيك يا بشمهندس! لو انت شغال طوير واجهات باستخدام ريأكت (React Web Development)، فغالباً عانيت في يوم من الأيام من تعقيد إدارة الحالة (State Management). تفتكر كام مرة كتبت كود كتير جداً وعملت إعدادات طويلة عريض لمكتبة ريدكس (Redux) عشان بس تنقل قيمة بسيطة من كومبوننت (Component) للثاني؟ الموضوع ساعات بيبقى عامل زي ما تكون راكب عربية محطة الفضاء الدولية عشان تروح تجيب عيش من الفران اللي جنبكم!

الناس بدأت تدور على حلول أسهل وأخف، وهنا ظهرت النجوم الحقيقية اللي بتسهل حياتنا. في المقال ده، هنتكلم بالتفصيل عن بديل ريدكس الخفيف واللي خطف قلوب المبرمجين الفترة دي: مكتبة جوتاي (Jotai)، وإزاي مفهوم الذرات (Atoms) بيغير طريقة تفكيرنا في بناء التطبيقات.

إيه هو وجع القلب مع ريدكس وليه بندور على بديل؟

زمان، لما كنا بنعمل مشروع ريأكت (React Application) حجمه متوسط أو كبير، كان أول اختيار بيجي في بالنا هو ريدكس (Redux) أو ريدكس توكيت (Redux Toolkit). صح ولا أنا غلطان؟ بس الصراحة، ريدكس بيجي معاها ضريبة غالية:

• بيلبروتوكول (Boilerplate Code) كتير جداً: أكواد تحضيرية مالهاش أول من آخر (Actions, Reducers, Slices).
• مشاكل في إعادة الرندر (Re-renders): أحياناً الكومبوننت بيعمل رندر تاني لوحده من غير داعي لمجرد إن الـ Store اتغير في حتة تانية خالص.
• حجم المكتبة (Bundle Size): صح هي بقت أخف دلوقتي، لسه برضو تعتبر ثقيلة مقارنة بالحلول الحديثة.

المبرمجين بقوا عايزين حاجة خفيفة، سريعة، وبتشتغل بنظام المنهجية التفاعلية (Reactive Paradigm) من غير تعقيد، وهنا بيجي دور البطل بتاعنا النهارده: جوتاي (Jotai).

يعني إيه Jotai وإيه هي فكرة الـ Atoms؟

كلمة "جوتاي" (Jotai) معناها بالياباني "حالة" أو "وضع" (State). المكتبة دي اتطورت بواسطة ناس فاهمة دماغ مطوري ريأكت صح. الفكرة الجوهرية بتاعة جوتاي مبنية على حاجة اسمها الذرات أو الـ (Atoms).

الـ Atom ببساطة هو أصغر وحدة حالة (Piece of State) ممكن تتخيلها. الـ Atom ده ممكن يكون جواه رقم، نص، مصفوفة، أو حتى أوبجكت (Object). الحلو بقى إن الذرات دي مستقلة بذاتها؛ الكومبوننت بيعمل سابسبريبشن (Subscription) أو اشتراك على الذرة اللي محتاجها بس! ده معناه إيه؟ معناه إن لو ذرة واحدة اتغيرت، الكومبوننتس اللي مستخدمة الذرة دي بس هي اللي هيحصلها إعادة رندر (Re-render)، والباقي نايم في العسل. أداء عالي جداً بدون أي مجهود إضافي.

إزاي نستخدم Jotai عملياً في كود ريأكت؟

تعالوا ناخد مثال عملي وبسيط عشان نفهم الكود بيشتغل إزاي. فرضا إننا عايزين نعمل عداد (Counter) باستخدام جوتاي (Jotai).

أول خطوة، بنعرف الـ Atom بتاعنا في ملف منفصل:

import { atom } from 'jotai'

// بنعمل تعريف للذرة ونحط فيها قيمة ابتدائية صفر
export const countAtom = atom(0)

بعد ما عرفنا الذرة، تعالوا نستخدمها جوه الكومبوننت (Component) بكل سهولة باستخدام الهุوك (Hook) اللي اسمه useAtom:

import React from 'react'
import { useAtom } from 'jotai'
import { countAtom } from './counterStore'

function CounterComponent() {
  // بنستخدم الuseAtom زي الuseState بالظبط!
  const [count, setCount] = useAtom(countAtom)

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h2>العداد الحالي: {count}</h2>
      <button onClick={() => setCount(count + 1)}>زود القيمة</button>
      <button onClick={() => setCount(0)} style={{ marginLeft: '10px' }}>تصفير</button>
    </div>
  )
}

export default CounterComponent

شايف الجمال والبساطة؟ لا فيه Context Providers معقدة تلف بيها التطبيق كله، ولا Redux DevTools معقدة في الإعداد. كود ناعم، نظيف، وسهل جداً تقراه وتعدل عليه.

ليه مبرمجين كتير بقوا يفضلوا Jotai عن غيرها؟

فيه أسباب منطقية تخلي مكتبة زي جوتاي (Jotai) تتصدر المشهد في عالم الـ Web Development حالياً:

• API شبه الـ React useState: مش هتحتاج تتعلم مفاهيم جديدة وغريبة، لو بتعرف تشتغل بـ useState هتعرف تشتغل بـ Jotai فوراً.
• حجم صغير جداً (Lightweight): المكتبة صغيرة جداً ومش هتزود حجم الـ Bundle بتاعتك.
• التعامل مع الحالة المشتقة (Derived State): جوتاي بتدعم حاجة اسمها Read-only atoms و Write-atoms، يعني تقدر تحسب قيمة جديدة مبنية على ذرتين تانيين بكل سهولة وسلاسة من غير مجهود.
• تدعم وضع الـ Concurrent Mode: متوافقة تماماً مع أحدث مميزات ريأكت زي التحديثات المتزامنة.

خاتمة ونصيحة من أخ

في النهاية يا صديقي، أدوات البرمجة بتتغير وتتطور بسرعة البرق. ومفيش حاجة اسمها "الأداة الأفضل بالمطلق"، لكن فيه "الأداة الأنسب لمشروعك". لو المشروع بتاعك صغير أو متوسط، أو حتى كبير بس حابب تبعد عن صداع الإعدادات والتعقيد، فـ Jotai هتكون اختيار ممتاز وهيفرمل معاك وقت كتير في التطوير.

نصيحتي ليك كأخ: متخافش تجرب التكنولوجيا الجديدة. اعمل مشروع تجريبي (Side Project) بـ Jotai النهاردة قبل بكره، وجرب بنفسك إزاي هتحس بالحرية والسرعة في كتابة الكود. البرمجة مهارة بتتطور بالممارسة، وكل خطوة جديدة بتتعلمها بتخليك مهندس برمجيات أشطر وأذكي.