Black Lives Matter. Support the Equal Justice Initiative.
React
v16.13.1 LanguagesGitHub

Memperkenalkan Mode Concurrent (Eksperimental)

Perhatian:

Laman ini menjelaskan fitur eksperimental yang belum tersedia dalam versi rilis yang stabil. Jangan mengandalkan build eksperimental dalam aplikasi React versi produksi. Fitur ini dapat berubah secara signifikan dan tanpa peringatan sebelum menjadi bagian dari React.

Dokumentasi ini ditujukan untuk pengguna awal dan orang-orang yang penasaran. Kalau anda baru menggunakan React, jangan khawatir tentang fitur ini — anda tidak perlu mempelajarinya sekarang.

Laman ini menyediakan ikhtisar teoretis untuk Mode Concurrent. Untuk pengenalan yang lebih praktikal, anda mungkin ingin melihat bagian selanjutnya:

Apa Itu Mode Concurrent?

Mode Concurrent adalah serangkaian fitur baru yang membantu aplikasi React tetap responsif dan menyesuaikan dengan kapabilitas perangkat pengguna dan kecepatan jaringan.

Fitur ini masih dalam tahap percobaan dan dapat berubah sewaktu-waktu. Fitur ini belum menjadi bagian dari React versi rilis yang stabil, tetapi anda dapat mencobanya dalam build eksperimental.

Blocking vs Interruptible Rendering

Untuk menjelaskan Mode Concurrent, kita akan menggunakan version control sebagai kiasan. Jika anda bekerja dalam tim, anda mungkin menggunakan sistem version control seperti Git dan bekerja dalam branch. Ketika sebuah branch telah siap, anda dapat menggabungkan pekerjaan anda ke dalam master sehingga orang lain dapat mengambil pekerjaan anda.

Sebelum ada version control, alur kerja pengembangan sangat berbeda. Tidak ada konsep branch. Jika anda ingin mengubah beberapa berkas, anda harus memberitahu semua orang untuk tidak menyentuh berkas-berkas itu sampai anda menyelesaikan pekerjaan anda. Anda bahkan tidak bisa mulai mengerjakannya secara bersamaan dengan orang itu - anda benar-benar diblokir oleh mereka.

Ini menggambarkan bagaimana library antarmuka pengguna (UI), termasuk React, khususnya bekerja sampai hari ini. Begitu mereka mulai me-render yang terbaru, termasuk membuat DOM node baru dan menjalankan kode di dalam komponen, mereka tidak bisa meng-interupsi pekerjaan ini. Kita akan menyebut pendekatan ini sebagai ”blocking rendering“.

Saat Mode Concurrent, rendering tidak memblokir. Hal itu dapat di-interupsi. Ini meningkatkan pengalaman pengguna (UX). Itu juga membuka fitur-fitur baru yang tidak mungkin sebelumnya. Sebelum kita melihat contoh konkret di bab selanjutnya, kami akan melakukan ikhtisar tingkat tinggi pada fitur-fitur baru.

Interruptible Rendering

Bayangkan daftar produk yang dapat di-filter. Pernahkah anda mengetikkan daftar filter dan merasa stutter setiap menekan tombol? Beberapa pekerjaan untuk memperbarui daftar produk mungkin tidak dapat dihindari, seperti membuat DOM node baru atau browser yang melakukan tata letak. Bagaimanapun, kapan dan bagaimana kita melakukan pekerjaan itu memainkan peran yang besar.

Cara yang umum untuk mengatasi stutter adalah dengan melakukan ”debounce” pada masukan. Ketika me-debounce, kita hanya memperbarui daftar setelah pengguna berhenti mengetik. Namun, itu bisa membuat frustasi karena antarmuka pengguna (UI) tidak memperbarui saat mengetik. Sebagai alternatif, kita bisa melakukan ”throttle” pada masukan, dan memperbarui daftarnya dengan frekuensi maksimum tertentu. Tetapi kemudian pada perangkat bertenaga rendah masih akan tetap berakhir dengan stutter. Debounce dan throttle keduanya membuat pengalaman pengguna (UX) kurang optimal.

Alasan untuk melakukan stutter sederhana: begitu mulai me-render, hal itu tidak dapat di-interupsi. Jadi browser tidak dapat memperbarui masukan teks setelah tombol ditekan. Tidak perduli sebagus apa library antarmuka pengguna (UI) (seperti React) akan terlihat perbandingannya, jika itu menggunakan blocking rendering, sejumlah pekerjaan dalam komponen anda akan selalu menyebabkan stutter. Dan, seringkali, tidak ada cara yang mudah untuk memperbaikinya.

Mode Concurrent memperbaiki keterbatasan mendasar dengan membuat render yang dapat di-interupsi. Ini berarti ketika pengguna menekan tombol lain, React tidak perlu memblokir browser memperbarui masukan teks. Bahkan, hal itu membiarkan browser memperbarui masukan, dan kemudian melanjutkan me-render daftar terbaru dalam memori. Ketika render selesai, React memperbarui DOM, dan perubahannya terlihat pada layar.

Secara konsep, anda dapat menganggap hal ini sebagai React yang sedang mempersiapkan setiap perubahan “pada suatu branch”. Sama seperti anda dapat meninggalkan pekerjaan dalam branch atau beralih ke branch yang lain, React saat Mode Concurrent bisa mengganggu perubahan yang sedang berlangsung untuk melakukan sesuatu yang lebih penting, dan kemudian kembali ke apa yang sedang dilakukan sebelumnya. Teknik ini juga mungkin mengingatkan anda tentang buffering ganda dalam video games.

Teknik Mode Concurrent mengurangi kebutuhan debounce dan throttle dalam antarmuka pengguna (UI). Karena render dapat di-interupsi, React tidak perlu untuk menunda pekerjaannya secara artifisial untuk menghindari stutter. Hal itu dapat segera mulai me-render, tapi mengganggu pekerjaan ini ketika diperlukan untuk menjaga aplikasinya tetap responsif.

Urutan Memuat yang Disengaja

Kami telah mengatakan sebelumnya bahwa Mode Concurrent itu seperti React yang bekerja “pada suatu branch“. Branch berguna tidak hanya untuk waktu perbaikan jangka pendek, tapi juga untuk fitur jangka panjang. Terkadang anda mungkin mengerjakan suatu fitur, tapi itu mungkin butuh waktu berminggu-minggu sebelum itu dalam “kondisi yang cukup bagus” untuk digabungkan ke master. Sisi metafora version control kita ini berlaku untuk render juga.

Anggap kita menavigasi antara dua layar pada suatu aplikasi. Terkadang, kita mungkin tidak punya cukup kode dan data yang dimuat untuk menampilkan muatan yang “cukup baik” kepada pengguna pada layar baru. Transisi ke layar kosong atau spinner besar bisa menjadi pengalaman yang menjengkelkan. Namun, hal itu juga umum bahwa kode dan data tidak butuh waktu yang lama untuk mengambil. Bukankah lebih baik jika React bisa berdiam pada layar yang lama untuk lebih lama, dan “melewati” kondisi muatan yang buruk sebelum menampilkan layar yang baru?

Walaupun hal ini memungkinkan saat ini, hal itu sulit untuk diatur. Pada Mode Concurrent, fitur ini built-in. React mulai mempersiapkan layar yang baru pada memori terlebih dahulu - atau, seperti metafora kita, “pada branch yang berbeda”. Jadi React bisa menunggu sebelum memperbarui DOM sehingga lebih banyak konten yang bisa dimuat. Pada Mode Concurrent, kita bisa memberitahu React untuk terus menampilkan layar yang lama, interaktif sepenuhnya, dengan indikator muatan inline. Dan ketika layar yang baru sudah siap, React bisa membawa kita ke layar yang baru.

Concurrency

Mari kita rekap dua contoh di atas dan lihat bagaimana Mode Concurrent menyatukan mereka. Saat Mode Concurrent, React dapat bekerja pada beberapa perubahan state secara bersamaan — sama seperti branch membiarkan anggota tim yang berbeda untuk bekerja secara independen:

  • Untuk perubahan CPU-bound (seperti membuat DOM node dan menjalankan kode komponen), concurrency dapat diartikan bahwa perubahan yang lebih mendesak dapat “meng-interupsi” render yang sudah berjalan.
  • Untuk perubahan IO-bound (seperti pengambilan kode atau data dari jaringan), concurrency dapat diartikan bahwa React bisa mulai me-render dalam memori bahkan sebelum semua data tiba, dan melewati untuk menampilkan state yang sedang memuat.

Yang terpenting, cara anda menggunakan React itu sama. Konsep seperti komponen, props, and state secara fundamental bekerja dengan cara yang sama. Saat anda ingin memperbarui layar, anda mengatur state nya.

React menggunakan perilaku perangkat lunak untuk memutuskan seberapa “mendesak” suatu perubahan, dan membiarkan anda menyesuaikannya dengan beberapa baris kode sehingga anda dapat mencapai pengalaman pengguna (UX) yang diinginkan untuk setiap interaksi.

Menempatkan Riset ke dalam Pengembangan

Ada motif umum mengelilingi fitur Mode Concurrent. Misi nya adalah untuk membantu mengintegrasikan hasil temuan riset Human-Computer Interaction ke dalam antarmuka pengguna (UI) nyata.

Sebagai contohnya, riset menunjukkan bahwa menampilkan terlalu banyak state yang sedang memuat saat transisi antar layar membuat nuansa transisi lebih lambat. Inilah sebabnya kenapa Mode Concurrent menunjukkan state baru yang sedang memuat pada “jadwal” yang pasti untuk menghindari pembaruan yang terlalu sering dan menjengkelkan.

Sama halnya, kami tahu dari riset bahwa interaksi seperti hover dan masukan teks perlu ditangani dalam waktu yang sangat singkat, sementara klik dan transisi antar halaman bisa membutuhkan waktu sedikit lebih lama tanpa merasa lamban. Perbedaan “prioritas” yang digunakan Mode Concurrent secara internal sesuai dengan kategori interaksi pada riset persepsi manusia.

Tim dengan fokus yang kuat pada pengalaman pengguna (UX) terkadang memecahkan masalah yang sama dengan solusi tersendiri. Namun, solusi tersebut jarang bertahan untuk waktu yang lama, karena sulit dipertahankan. Dengan Mode Concurrent, tujuan kami adalah untuk memadukan riset temuan antarmuka pengguna (UI) ke dalam abstraksi itu sendiri, dan menyediakan cara idiomatis untuk menggunakannya. Sebagai library antarmuka pengguna (UI), React berada pada posisi yang tepat untuk melakukan itu.

Tahap selanjutnya

Sekarang anda tahu apa itu Mode Concurrent!

Pada laman selanjutnya, anda akan mempelajari lebih detil tentang topik tertentu:

Is this page useful?Edit halaman ini