مقدمة React Hooks || الجزء الثاني: useState

شو يعني State؟

قلنا إن React تعتمد على Virtual DOM — وهنا تكمن المشكلة.

لو كتبت هيك:

function App() {
  let count = 0;

  const handleClick = () => {
    count = count + 1;
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
    

الـ count بيتغير في الـ Memory بس الـ DOM ما رح يتغير أي شيء نهائياً.

ليش؟ لأن React ما عندها أي سبب تعمل تغيير على DOM.

وهنا بيجي دور الـ State.

لو بدك أي تغيير يظهر على الشاشة، لازم تستخدم State — هي اللي بتخبر React إن في تغيير صار وإنها تعمل re-render.

الـ State في Class Component كيف كان؟

قبل Hooks، كانت الـ State تشتغل هيك مع Class:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}
    

لاحظ شو كان عنا:

• constructor هي Method اللي بتحتوي على الـ State
• عشان أوصل للـ State لازم أستخدم this — وهاد كان الأمر المزعج اللي حكينا عنه في الجزء الأول
• this.setState عشان أغيّر على الـ State لازم أمرر object يحتوي على الـ State اللي رح أغيّر عليه والقيمة الجديدة
• render() هي Method عشان ترجع الـ UI

useState في Functional Component

مع الـ Hook صارت الدنيا أبسط بكثير، لاحظوا بنفسكم:

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}
    

شو صار عنا هنا:

• عندي Function عادي أو Arrow — مش قصة
• لو بدي أستخدم State لازم أعمل import لـ useState
• داخل الـ Function وقبل الـ return بعمل Destructuring كـ Array — الأول اسم الـ State مثلاً count، والثاني هو الـ setter وبالـ best practices أسميه setCount بالـ Camel Case
• useState(initialValue) الـ initialValue هي القيمة الأولى للـ State مثلاً 0 وممكن تكون أي data type
• عشان أغيّر القيمة بستخدم setCount وأمرر داخلها القيمة الجديدة
• عشان أعرض الـ State داخل JSX بحطها بين {} — وهي بترجع لي JavaScript داخل HTML

ملخص سريع

تعريف State

• Class Component: this.state = {}
• Functional Component: useState()

قراءة القيمة

• Class Component: this.state.count
• Functional Component: count

تغيير القيمة

• Class Component: this.setState({})
• Functional Component: setCount()

كمية الكود

• Class Component: كثير
• Functional Component: بسيط

ما القادم؟

في الجزء الثالث رح نتعلم ثاني Hook وهي useEffect 👇

اكتبوا رأيكم واستفساراتكم في التعليقات 👇