الفرق بين functions و custom hooks في react

مرحبًا أحمد برجاء في المرة القادم كتابة الأسئلة باللغة العربية حتى يسهل فهمها ويسهل الإجابة عليها ويستفاد باقي الزوار من تلك الإجابات

بالنسبة لسؤالك فإن الhooks هي في حد ذاتها دوال functions ولكنا دوال من نوع خاص

ما هو الخاص فيها؟

الخطافات (hooks) بشكل أساسي يتم إستخدامها من أجل التعامل مع دورة حياة الوِحدة(component) سواء من حيث تغيير الحالة الخاصة بها أو تنفيذ فعل معين عند تغيير الحالة الخاصة بها ويتم تصميمها بحيث لا تعمل إلا في الfunctional react components لذا يمكننا القول أن أي خطاف دالة وليست كل دالة خطاف

على سبيل المثال في الشكل التالي شفرة برمجية لcustom hook للتعامل مع النماذج 

const useForm = (initialState = {}) => {
    const [formData, setFormData] = React.useState(initialState);

    const handleInputChange = (e) => {
        setFormData({ ...formData, [e.target.name]: e.target.value })
    }

    return { formData, handleInputChange };
}

يتم إستخدامها بالشكل التالي 

function Form() {
    const [formData, setFormData] = React.useState({
        username: "",
        password: "",
    });

    const { username, password } = formData;

    const handleInputChange = (e) => {
        setFormData({ ...form, [e.target.name]: e.target.value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.dir(formData);
    }

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="username"
                value={username}
                onChange={handleInputChange}
            />
            <input
                type="password"
                name="password"
                value={password}
                onChange={handleInputChange}
            />
            <button type="submit">Submit</button>
        </form>

كما تلاحظ هنا نحن إستخدمنا خطاف بسيط مثل الuseState وأضفنا إليه شفرتنا الخاصة حتى نصل إلى خطاف جديد يقوم بتخزين بيانات النموذج دون الحاجة إلى التعامل معها يدويًا من خلال النموذج نفسه