Detail Info

Buat komponen input yang bisa dikontrol dari parent, misalnya: parent bisa memanggil focusInput() secara langsung ke anak.

Struktur:

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

Kode Lengkap:

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()).

useImperativeHandle – Custom Method dari Komponen Anak