React 18 mengembangkan kerangka kerja komponen JavaScript populer dengan fitur-fitur baru yang dibangun di sekitar rendering dan ketegangan bersamaan. Ini menjanjikan kinerja yang lebih baik, lebih banyak kemampuan, dan pengalaman pengembang yang ditingkatkan untuk aplikasi yang beralih.
Dalam artikel ini, kami akan menunjukkan kepada Anda cara meningkatkan basis kode Anda yang ada ke React 18. Ingatlah bahwa panduan ini hanya ikhtisar dari perubahan yang paling dapat diterapkan. Migrasi seharusnya cukup mudah untuk proyek kecil yang sudah mengikuti praktik terbaik Bereaksi; set besar komponen kompleks dapat menimbulkan beberapa masalah, yang akan kami jelaskan di bawah ini.
Menginstal React 18
Sebelum melakukan hal lain, gunakan npm untuk meningkatkan ketergantungan React proyek Anda ke v18:
$ npm install react@latest react-dom@latest
Rilis baru secara teknis tidak memiliki inkompatibilitas mundur. Fitur-fitur baru diaktifkan atas dasar keikutsertaan. Karena Anda belum mengubah kode apa pun, Anda seharusnya dapat memulai aplikasi dan mengamatinya dirender dengan benar. Proyek Anda akan berjalan dengan React 17 behavior yang sudah ada.
$ npm startEnabling
Fitur React 18: New Root API
Using React 18 tanpa perubahan basis kode akan menyebabkan satu efek samping: Anda akan melihat peringatan konsol browser setiap kali aplikasi Anda dipasang dalam pengembangan mode.
ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
Pesan penghentian ini dapat diabaikan dengan aman jika Anda belum siap untuk memutakhirkan proyek Anda. Saat Anda ingin mengadopsi kemampuan React 18, Anda perlu membuat perubahan yang dijelaskannya. Fungsi ReactDOM.render() lama telah diganti dengan root API baru yang lebih berorientasi objek. Selain meningkatkan kemudahan penggunaan, ini juga mengaktifkan sistem rendering bersamaan yang mendukung semua fitur utama baru.
Dalam file index.js atau app.js Anda, cari baris yang mirip dengan ini:
import App from "./App.js";
import ReactDOM from "react-dom";
const container = document.getElementById("react");
ReactDOM.render(<App />, container);
Ini adalah entrypoint khas untuk aplikasi React. Ini membuat instance komponen Aplikasi yang diimpor sebagai elemen root aplikasi Anda. Konten yang dirender disimpan sebagai innerHTML dari elemen HTML dengan id="react".
Untuk beralih ke API root React 18, ganti kode di atas dengan kode berikut:
import App from "./App.js";
import {createRoot} from "react-dom/client";
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);
Ini memiliki efek yang setara dengan ReactDOM.render() API lama. Alih-alih menginisialisasi elemen root dan merender aplikasi Anda sebagai operasi imperatif tunggal, React 18 membuat Anda membuat objek root terlebih dahulu dan kemudian secara eksplisit merender content.
Anda Selanjutnya mencari tempat di kode tempat Anda melepas simpul root. Ubah ReactDOM.unmountComponentAtNode() ke metode unmount() baru pada objek root Anda:
// Before
import App from "./App.js";
import ReactDOM from "react-dom";
const container = document.getElementById("react");
ReactDOM.render(<App />, container);
ReactDOM.unmountComponentAtNode(container);
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App />);
root.unmount();
Mengganti Render Callbacks
Argumen callback opsional metode ReactDOM.render() tidak memiliki padanan langsung di root API React 18. Anda sebelumnya dapat menggunakan kode ini untuk mencatat Rendered! ke konsol setelah React selesai merender node root:
import App from "./App.js";
import ReactDOM from "react-dom";
const container = document.getElementById("react");
ReactDOM.render(<App />, container, () => console.log("Rendered!"));
Fungsi ini telah dihapus karena waktu pemanggilan callback tidak dapat diprediksi saat menggunakan fitur rendering server streaming dan hidrasi parsial React 18 yang baru. Jika Anda sudah menggunakan panggilan balik render dan perlu mempertahankan kompatibilitas, Anda dapat mencapai perilaku serupa menggunakan mekanisme referensi:
import {createRoot} from "react-dom/client";
const App = ({callback}) => (
<div ref={callback}>
<h1>Demo App</h1>
</div>
);
const container = document.getElementById("react");
const root = createRoot(container);
root.render(<App callback={() => console.log("Rendered!")} />);
React memanggil referensi fungsi saat komponen dipasang. Menyetel referensi pada komponen yang merupakan node root Anda memungkinkan Anda mendeteksi saat rendering terjadi, memberikan efek yang mirip dengan sistem panggilan balik render lama. Uji aplikasi Anda secara menyeluruh untuk memastikan semuanya masih berfungsi seperti yang Anda harapkan. Jika Anda menemukan masalah, Anda mungkin dapat menyelesaikannya dengan resolusi umum ini.
Fitur Check for
Apps yang dibungkus dengan komponen mungkin berperilaku berbeda saat merender dalam mode pengembangan React 18. Ini karena Mode Ketat sekarang menguji apakah basis kode Anda mendukung status yang dapat digunakan kembali, sebuah konsep yang akan diperkenalkan sepenuhnya ke React di rilis mendatang. Status
Reusable memungkinkan React untuk memasang kembali komponen yang sebelumnya dihapus dengan status terakhirnya secara otomatis dipulihkan. Ini mengharuskan komponen Anda tahan terhadap permintaan efek ganda. Mode Ketat sekarang membantu Anda mempersiapkan status yang dapat digunakan kembali dengan mensimulasikan pemasangan, pelepasan, dan pemasangan ulang komponen Anda setiap kali digunakan, memunculkan masalah di mana status sebelumnya tidak dapat dipulihkan. Anda dapat menonaktifkan Mode Ketat jika menemukan masalah di aplikasi Anda atau dependensinya yang belum siap Anda atasi.
Support State Update Batching
React 18 mengubah cara pembaruan status "dikumpulkan" untuk meningkatkan kinerja. Saat Anda mengubah nilai status beberapa kali dalam suatu fungsi, React mencoba menggabungkannya menjadi satu render ulang:
const Component = () => {
const [query, setQuery] = useState("");
const [queryCount, setQueryCount] = useState(0);
/**
* Two state updates, only one re-render
*/
setQuery("demo");
setQueryCount(queryCount + 1);
};
Mekanisme ini meningkatkan efisiensi tetapi sebelumnya hanya bekerja di dalam event handler React. Dengan React 18, ia bekerja dengan semua pembaruan status, bahkan jika itu berasal dari pengendali acara asli, batas waktu, atau Janji. Beberapa kode mungkin berperilaku berbeda dari sebelumnya jika Anda membuat pembaruan status berturut-turut di salah satu tempat ini.
const Component = () => {
const [query, setQuery] = useState("");
const [queryId, setQueryId] = useState("");
const [queryCount, setQueryCount] = useState(0);
const handleSearch = query => {
fetch(query).then(() => {
setQuery("demo");
setQueryCount(1);
// In React 17, sets to "query-1"
// In React 18, sets to "query-0" - previous state update is batched with this one
setQueryId(`query-${queryCount}`);
});
}
};
Anda dapat menonaktifkan perilaku ini dalam situasi di mana Anda tidak siap untuk memfaktorkan ulang kode. Bungkus pembaruan status di flushSync() untuk memaksa mereka melakukan segera:
const Component = () => {
const [query, setQuery] = useState("");
const [queryId, setQueryId] = useState("");
const [queryCount, setQueryCount] = useState(0);
const handleSearch = query => {
fetch(query).then(() => {
flushSync(() => {
setQuery("demo");
setQueryCount(1);
});
// Sets to "query-1"
setQueryId(`query-${queryCount}`);
});
}
};
Berhenti Menggunakan Fitur yang Dihapus dan Tidak Didukung
Setelah semua aspek di atas telah diatasi, aplikasi Anda harus sepenuhnya kompatibel dengan React 18. Meskipun ada beberapa permukaan API lagi perubahan, ini seharusnya tidak memengaruhi sebagian besar aplikasi. Berikut adalah beberapa yang harus diperhatikan:
- unstable_changedBits telah dihapus – API yang tidak didukung ini memungkinkan untuk tidak ikut serta dalam pembaruan konteks. Itu tidak lagi tersedia.
- Polyfill Object.assign() telah dihapus – Anda harus menambahkan paket polyfill penetapan objek secara manual jika Anda perlu mendukung browser yang sangat lama tanpa Object.assign() bawaan.
- lebih lama didukung – React secara resmi menjatuhkan kompatibilitas dengan Internet Explorer menjelang akhir dukungan browser pada bulan Juni. Anda tidak boleh mengupgrade ke React 18 jika Anda masih memerlukan aplikasi Anda untuk berjalan di IE. Menggunakan Suspense dengan fallback yang tidak ditentukan sekarang setara dengan null
- – Batas Suspense dengan fallback={undefined} sebelumnya dilewati, memungkinkan kode untuk mengalir ke induk berikutnya batas di pohon. React 18 sekarang menghormati komponen Suspense tanpa fallback.
Server Side Rendering
Aplikasi yang menggunakan rendering sisi server akan memerlukan beberapa perubahan lagi untuk bekerja dengan React 18.
Sejalan dengan root API baru, Anda harus mengganti fungsi hydrate() lama di klien Anda- kode samping dengan hydrateRoot() baru yang disediakan oleh paket react-dom/client:
// Before
import App from "./App.js";
import ReactDOM from "react-dom";
const container = document.getElementById("react");
ReactDOM.hydrate(<App />, container);
// After
import App from "./App.js";
import {createRoot} from "react-dom/client";
const container = document.getElementById("react");
const root = hydrateRoot(container, <App />);
Dalam kode sisi server Anda, ganti panggilan API rendering yang tidak digunakan lagi dengan rekan barunya. Dalam kebanyakan kasus, Anda harus mengubah renderToNodeStream() menjadi renderToReadableStream() baru. API aliran baru membuka akses ke kemampuan rendering server streaming React 18, di mana server dapat terus mengirimkan HTML baru ke browser setelah render awal aplikasi Anda.
Mulai Menggunakan Fitur React 18
Sekarang setelah Anda meningkatkan, Anda dapat mulai membuat aplikasi Anda lebih kuat dengan menggabungkan fitur React 18. Penggunaan konkurensi React berarti render komponen dapat diinterupsi, membuka kemampuan baru dan UI yang lebih responsif.
Beberapa fitur yang ditambahkan termasuk pembaruan besar pada Suspense, cara untuk menetapkan prioritas pembaruan status dengan Transitions, dan mekanisme bawaan untuk pelambatan render ulang yang disebabkan oleh pembaruan yang tidak mendesak tetapi berfrekuensi tinggi. Ada beberapa perubahan dan peningkatan lain-lain juga: Anda dapat mengembalikan undefined dari metode render() komponen, peringatan tentang memanggil setState() pada komponen yang tidak di-mount telah dihapus, dan beberapa atribut HTML baru seperti imageSizes, imageSrcSet, dan aria-description dikenali oleh renderer DOM React.
Kesimpulan
React 18 stabil dan siap digunakan. Dalam kebanyakan kasus, proses pemutakhiran harus cepat dan mudah, hanya membutuhkan pembaruan npm dan peralihan ke API root baru. Anda tetap harus menguji semua komponen Anda: mereka mungkin berperilaku berbeda dalam beberapa situasi, seperti dalam Mode Ketat atau ketika pengelompokan otomatis berlaku.
Rilis baru ini menunjukkan arah masa depan React sebagai kerangka kerja berkinerja tinggi untuk semua jenis aplikasi web . Ini juga memperluas kemampuan rendering sisi server React, menambahkan Suspense di server dan kemampuan untuk menyimpan konten streaming ke pengguna Anda setelah render awal. Ini memberi pengembang lebih banyak fleksibilitas untuk mendistribusikan rendering di kedua klien dan server.
Itulah berita seputar
Cara Upgrade ke React 18, semoga bermanfaat.
Disadur dari HowToGeek.com.
