ما هو useImperativeHandle وكيف نستخدمه مع forwardRef للتحكم في واجهة المكون الابن؟

الإجابة المختصرة

يستخدم useImperativeHandle لتخصيص الخصائص والدوال التي يتم كشفها للمكون الأب عبر الـ Ref، بدلاً من تعريضه لكامل عقدة الـ DOM الداخلية.

الشرح

عند استخدام forwardRef، يحصل المكون الأب على إمكانية الوصول لعنصر DOM الداخلي. أحياناً ترغب في حماية المكون الداخلي وكشف أفعال محددة فقط (مثل scrollIntoView أو focus أو reset). يقوم useImperativeHandle بتعريف كائن واجهة برمجية مخصص مرتبط بالـ ref.

مثال بالكود

import { forwardRef, useImperativeHandle, useRef } from 'react';

export interface FancyInputHandle {
  focusInput: () => void;
}

export const FancyInput = forwardRef<FancyInputHandle, {}>((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focusInput: () => {
      inputRef.current?.focus();
    }
  }));

  return <input ref={inputRef} className="fancy-styled-input" />;
});

أخطاء شائعة

• الإفراط في استخدام useImperativeHandle لتحويل البرمجة من النمط التقريري (Declarative) إلى النمط الإجرائي (Imperative).

أسئلة متابعة

• متى يجب استخدام useRef وما الفارق الجوهري بينه وبين useState؟

المصادر

• React docs — useImperativeHandle