useImperativeHandle – Custom Method dari Komponen Anak

• Komponen Anak: input yang expose fungsi focus().
• Komponen Parent: tombol yang panggil fungsi dari anak.

jsxCopyEditimport React, { useRef, useImperativeHandle, forwardRef } from 'react';

// Komponen anak menggunakan forwardRef
const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef();

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

  return <input ref={inputRef} placeholder="Dikendalikan dari parent" />;
});

function ParentComponent() {
  const customInputRef = useRef();

  return (
    <div>
      <h1>useImperativeHandle Demo</h1>
      <CustomInput ref={customInputRef} />
      <button onClick={() => customInputRef.current.focusInput()}>
        Fokus ke Input
      </button>
    </div>
  );
}

export default ParentComponent;

Penjelasan useImperativeHandle:

• Digunakan bersamaan dengan forwardRef untuk expose method dari komponen anak ke parent.
• Membatasi akses ref: hanya expose method tertentu (focusInput()), bukan seluruh DOM.
• Cocok untuk membuat komponen yang reusable dengan kontrol imperatif (misalnya .scrollToTop(), .focus(), .reset()).