We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

API Tingkat Atas React

These docs are old and won’t be updated. Go to react.dev for the new React docs.

These new documentation pages teach modern React:

React merupakan entry point untuk menggunakan library React. Apabila Anda mengimpor React menggunakan tag <script>, API tingkat atas ini tersedia pada React global. Apabila Anda menggunakan ES6 dengan npm, Anda dapat mengimpor React dengan menuliskan import React from 'react'. Apabila Anda menggunakan ES5 dengan npm, Anda dapat mengimpor React dengan menuliskan var React = require('react').

Ikhtisar

Komponen

Komponen React membuat Anda dapat memisahkan antarmuka pengguna menjadi bagian yang independen dan dapat digunakan kembali, serta dapat dipikirkan secara terpisah. Komponen React dapat didefinisikan dengan melakukan subclassing pada kelas React.Component atau React.PureComponent.

Apabila Anda tidak menggunakan kelas ES6, Anda dapat menggunakan modul create-react-class. Kunjungi Menggunakan React Tanpa ES6 untuk informasi selengkapnya.

Komponen React juga dapat didefinisikan sebagai fungsi yang dapat dibungkus:

Membuat Elemen React

Kami menyarankan untuk menggunakan JSX untuk mendeskripsikan bagaimana tampilan antarmuka pengguna Anda seharusnya terlihat. Setiap elemen JSX merupakan syntactic sugar untuk memanggil React.createElement(). Anda tidak perlu memanggil method berikut secara langsung apabila Anda menggunakan JSX.

Kunjungi Menggunakan React tanpa JSX untuk informasi selengkapnya.

Mengubah Elemen

React menyediakan beberapa API untuk memanipulasi elemen:

Fragments

React juga menyediakan komponen untuk me-render lebih dari satu elemen tanpa perlu menggunakan pembungkus.

Refs

Suspense

Suspense membuat komponen dapat “menunggu” sesuatu sebelum melakukan rendering. Untuk saat ini, Suspense hanya mendukung satu kasus penggunaan: membuat komponen secara dinamis menggunakan React.lazy. Pada masa yang akan datang, Suspense akan mendukung penggunaan lain seperti pengambilan data.

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

Hooks

Hooks merupakan fitur baru pada React 16.8. Hook membuat Anda dapat menggunakan state dan fitur React lain tanpa menuliskan sebuah kelas. Hooks memiliki bagian dokumentasi tersendiri dan terpisah dengan referensi API:


Referensi

React.Component

This content is out of date.

Read the new React documentation for Component.

React.Component merupakan kelas pokok untuk komponen React ketika didefinisikan menggunakan kelas ES6:

class Greeting extends React.Component {
  render() {
    return <h1>Halo, {this.props.name}</h1>;
  }
}

Kunjungi Referensi API React.Component untuk melihat daftar method dan property yang berhubungan dengan kelas React.Component.


React.PureComponent

This content is out of date.

Read the new React documentation for PureComponent.

React.PureComponent mirip dengan React.Component. Perbedaannya adalah React.Component tidak mengimplementasikan shouldComponentUpdate(), sedangkan React.PureComponent mengimplementasikannya dengan perbandingan props dan state secara dangkal (shallow).

Apabila fungsi render() pada komponen React Anda me-render hasil yang sama dengan props dan state yang sama juga, Anda dapat menggunakan React.PureComponent untuk meningkatkan kinerja komponen pada kasus tertentu.

Catatan

shouldComponentUpdate() pada React.PureComponent hanya membandingkan objek secara dangkal (shallow compare). Apabila objek tersebut berisi struktur data yang rumit dan dalam, bisa jadi hal ini akan menghasilkan false-negative pada perbandingan yang lebih dalam. Gunakan PureComponent hanya ketika Anda memiliki props dan state yang dangkal, atau gunakan forceUpdate() saat Anda tahu bahwa ada perubahan pada struktur data yang dalam. Atau, cobalah untuk menggunakan immutable object untuk mempercepat proses perbandingan data bersarang.

Selain itu, shouldComponentUpdate() pada React.PureComponent melewati proses pembaruan props pada seluruh komponen dibawahnya. Jadi pastikan semua komponen anaknya juga ”pure“.


React.memo

This content is out of date.

Read the new React documentation for memo.

const MyComponent = React.memo(function MyComponent(props) {
  /* render menggunakan props */
});

React.memo merupakan sebuah higher order component.

Apabila function component Anda me-render hasil yang sama jika diberikan props yang sama juga, Anda dapat membungkusnya dengan menggunakan React.memo untuk meningkatkan kinerjanya dengan cara menyimpan (memoize) hasil render-nya. Ini artinya React akan melewati proses render komponen, dan menggunakan hasil render terakhir.

React.memo hanya berefek kepada props yang berubah. Jika komponen Anda yang dibungkus dengan React.memo memiliki Hooks useState atau useContext dalam implementasinya, komponen itu akan tetap me-render ulang apabila state atau context berubah.

Secara bawaan React.memo hanya akan membandingkan objek yang kompleks pada objek props secara dangkal (shallow comparison). Apabila Anda ingin membuat perbandingan sendiri, Anda juga dapat memberikan fungsi pembanding custom sebagai argumen kedua.

function MyComponent(props) {
  /* render menggunakan props */
}
function areEqual(prevProps, nextProps) {
  /*
  mengembalikan nilai true apabila dengan mengoper nextProps ke render akan mengembalikan
  hasil yang sama seperti mengoper prevProps ke render,
  selain itu akan mengembalikan nilai false
  */
}
export default React.memo(MyComponent, areEqual);

Method ini hanya digunakan sebagai optimasi kinerja. Jangan menggunakannya untuk “mencegah” render, karena dapat menyebabkan bug.

Catatan

Tidak seperti method shouldComponentUpdate() pada class component, fungsi areEqual mengembalikan nilai true apabila props bernilai sama dan false Apabila props tidak sama. Ini merupakan kebalikan dari shouldComponentUpdate.


createElement()

This content is out of date.

Read the new React documentation for createElement.

React.createElement(
  type,
  [props],
  [...children]
)

Membuat dan mengembalikan elemen React baru berdasarkan type yang diberikan. Argumen type dapat diisi dengan nama tag berupa string (seperti 'div' atau 'span'), komponen React (kelas atau fungsi), atau fragment React.

Kode yang ditulis dengan JSX akan dikonversi menggunakan React.createElement(). Anda tidak perlu menggunakan React.createElement() secara langsung apabila Anda menggunakan JSX. Kunjungi React tanpa JSX untuk informasi selengkapnya.


cloneElement()

This content is out of date.

Read the new React documentation for cloneElement.

React.cloneElement(
  element,
  [config],
  [...children]
)

Melakukan clone dan mengembalikan elemen React baru berdasarkan elemen yang diberikan. Elemen yang dihasilkan akan memiliki props dari elemen asli (elemen yang di-clone) dengan tambahan props baru yang akan digabungkan secara dangkal. Children baru yang dimasukkan sebagai argumen akan menggantikan children yang sudah ada. Sedangkan key dan ref dari elemen asli akan tetap dipertahankan.

React.cloneElement() mirip dengan:

<element.type {...element.props} {...props}>{children}</element.type>

Namun, React.cloneElement() tetap mempertahankan ref. Ini artinya apabila Anda mendapatkan child yang memiliki ref, Anda tidak akan mencurinya secara tidak sengaja dari ancestor. Anda akan mendapatkan ref yang sama yang dilampirkan ke elemen yang baru. The new ref or key will replace old ones if present.

API ini dikenalkan sebagai pengganti dari React.addons.cloneWithProps().


createFactory()

This content is out of date.

Read the new React documentation for createFactory.

React.createFactory(type)

Mengembalikan fungsi yang akan menghasilkan elemen React berdasarkan type yang diberikan. Seperti React.createElement(), argumen type dapat diisi dengan nama tag berupa string (seperti 'div' atau 'span'), komponen React (kelas atau fungsi), atau fragment React.

Helper ini dianggap legacy, dan Kami menganjurkan Anda untuk menggunakan JSX atau React.createElement() secara langsung.

Anda tidak perlu menggunakan React.createFactory() secara langsung apabila Anda menggunakan JSX. Kunjungi React Tanpa JSX untuk informasi selengkapnya.


isValidElement()

This content is out of date.

Read the new React documentation for isValidElement.

React.isValidElement(object)

Memeriksa apakah objek yang diberikan merupakan elemen React atau bukan. Mengembalikan true atau false.


React.Children

This content is out of date.

Read the new React documentation for Children.

React.Children memberikan utilitas untuk berurusan dengan struktur data this.props.children.

React.Children.map

React.Children.map(children, function[(thisArg)])

Menjalankan sebuah fungsi pada setiap child yang berada pada children dengan this yang diisikan ke thisArg. Apabila children berbentuk senarai, maka senarai tersebut akan dilewati dan fungsi akan dipanggil untuk setiap child di dalam senarai. Apabila children bernilai null atau undefined, method ini akan mengembalikan nilai null atau undefined daripada senarai.

Catatan

Apabila children merupakan Fragment maka children tersebut akan dianggap sebagai satu child dan tidak akan diproses.

React.Children.forEach

React.Children.forEach(children, function[(thisArg)])

Mirip dengan React.Children.map() namun tidak mengembalikan senarai.

React.Children.count

React.Children.count(children)

Mengembalikan jumlah total komponen yang berada di dalam children, jumlah total yang dihasilkan sama dengan berapa kali sebuah callback yang dioper ke map atau forEach akan dijalankan.

React.Children.only

React.Children.only(children)

Memeriksa apakah children yang diberikan hanya memiliki satu child (elemen React) dan mengembalikannya. Jika tidak method ini akan melempar error.

Catatan:

React.Children.only() mengembalikan nilai yang berbeda dengan React.Children.map() karena React.Children.map() mengembalikan senarai dan bukan elemen React.

React.Children.toArray

React.Children.toArray(children)

Mengembalikan struktur data children sebagai senarai datar dengan key yang diberikan pada setiap child. Sangat berguna apabila Anda ingin memanipulasi kumpulan children pada method render Anda, terutama apabila Anda ingin mengurutkan atau memotong this.props.children sebelum menurunkannya.

Catatan:

React.Children.toArray() mengubah key untuk mempertahankan semantik dari senarai bersarang ketika meratakan (flatten) daftar children. Itu artinya, toArray menambahkan prefiks di setiap key pada senarai yang dikembalikan sehingga setiap key elemen mencakup senarai masukan yang mengandungnya.


React.Fragment

This content is out of date.

Read the new React documentation for Fragment.

Komponen React.Fragment membuat Anda dapat mengembalikan lebih dari satu elemen pada method render() tanpa membuat elemen DOM tambahan:

render() {
  return (
    <React.Fragment>
      Beberapa teks.
      <h2>Sebuah heading</h2>
    </React.Fragment>
  );
}

Anda juga dapat menggunakannya dengan menuliskan sintaksis pintas <></>. Untuk informasi selengkapnya, kunjungi React v16.2.0: Improved Support for Fragments.

React.createRef

This content is out of date.

Read the new React documentation for createRef.

React.createRef membuat sebuah ref yang dapat dilampirkan ke elemen React melalaui atribut ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();  }

  render() {
    return <input type="text" ref={this.inputRef} />;  }

  componentDidMount() {
    this.inputRef.current.focus();  }
}

React.forwardRef

This content is out of date.

Read the new React documentation for forwardRef.

React.forwardRef membuat komponen React yang dapat meneruskan atribut ref yang diterima ke komponen lain yang berada di bawahnya. teknik ini jarang digunakan tapi sangat berguna pada dua skenario berikut:

React.forwardRef menerima fungsi rendering sebagai argumen. React akan memanggil fungsi ini dengan props dan ref sebagai dua argumen. Fungsi ini akan mengembalikan node React.

const FancyButton = React.forwardRef((props, ref) => (  <button ref={ref} className="FancyButton">    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Pada contoh diatas, React mengoper ref yang diberikan ke elemen <FancyButton ref={ref}> sebagai argumen kedua ke fungsi rendering yang berada pada pemanggilan React.forwardRef. Fungsi rendering ini mengoper ref ke elemen <button ref={ref}>.

Hasilnya, setelah React melampirkan ref tersebut, ref.current akan menunjuk ke instansi elemen DOM <button> secara langsung.

Untuk informasi selengkapnya, kunjungi meneruskan ref.

React.lazy

This content is out of date.

Read the new React documentation for lazy.

React.lazy() membuat Anda dapat mendefinisikan komponen yang akan dimuat secara dinamis. Ini membantu mengurangi ukuran bundel dengan menunda pemuatan komponen yang tidak digunakan saat render pertama.

Anda dapat belajar cara menggunakan React.lazy() dari dokumentasi pembagian kode kami. Anda mungkin juga ingin melihat artikel ini yang menjelaskan cara menggunakan React.lazy() secara lebih detail.

// Komponen ini dimuat secara dinamis
const SomeComponent = React.lazy(() => import('./SomeComponent'));

Perhatikan bahwa untuk me-render komponen lazy, Anda membutuhkan komponen <React.Suspense> yang berada pada posisi yang lebih tinggi di dalam pohon rendering. Ini merupakan cara bagaimana Anda menentukan indikator pemuatan.

React.Suspense

This content is out of date.

Read the new React documentation for Suspense.

React.Suspense membuat Anda dapat menentukan indikator pemuatan apabila beberapa komponen di bawahnya belum siap untuk di-render. Saat ini, komponen lazy loading merupakan satu-satunya kasus penggunaan yang didukung <React.Suspense>:

// Komponen ini dimuat secara dinamis
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // Tampilkan <Spinner> hingga OtherComponent dimuat
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}

Hal itu didokumentasikan pada panduan pembagian kode kami. Perhatikan bahwa komponen lazy dapat berada jauh di dalam pohon Suspense — komponen tersebut tidak perlu dibungkus secara satu per satu. Sangat disarankan untuk meletakkan <Suspense> dimana Anda ingin melihat indikator pemuatan, akan tetapi untuk menggunakan lazy() dimanapun Anda ingin melakukan pembagian kode.

Note

For content that is already shown to the user, switching back to a loading indicator can be disorienting. It is sometimes better to show the “old” UI while the new UI is being prepared. To do this, you can use the new transition APIs startTransition and useTransition to mark updates as transitions and avoid unexpected fallbacks.

React.Suspense in Server Side Rendering

During server side rendering Suspense Boundaries allow you to flush your application in smaller chunks by suspending. When a component suspends we schedule a low priority task to render the closest Suspense boundary’s fallback. If the component unsuspends before we flush the fallback then we send down the actual content and throw away the fallback.

React.Suspense during hydration

Suspense boundaries depend on their parent boundaries being hydrated before they can hydrate, but they can hydrate independently from sibling boundaries. Events on a boundary before it is hydrated will cause the boundary to hydrate at a higher priority than neighboring boundaries. Read more

React.startTransition

This content is out of date.

Read the new React documentation for startTransition.

React.startTransition(callback)

React.startTransition lets you mark updates inside the provided callback as transitions. This method is designed to be used when React.useTransition is not available.

Note:

Updates in a transition yield to more urgent updates such as clicks.

Updates in a transition will not show a fallback for re-suspended content, allowing the user to continue interacting while rendering the update.

React.startTransition does not provide an isPending flag. To track the pending status of a transition see React.useTransition.

Is this page useful?Edit halaman ini