Pertanyaan-pertanyaan berikut diambil dari pengalaman Abhisek Raj yang merupakan seorang Fullstack Developer di Highradius.
# Q1: Bagaimana caramu mengoptimasi situs web React yang berjalan lambat?
# Solusi
- Kita bisa membuka Developer Tools (F12) lalu ke bagian tab Network untuk mengecek apakah permasalahan situs web lambat dikarenakan oleh Frontend atau Backend.
- Jika permasalahannya terdapat pada Frontend, kita bisa menggunakan profiler untuk melihat letak permasalahannya. Frontend Developer pasti sudah familiar dengan Lighthouse atau GTMatrix untuk mendiagnosa situs web.
Permasalahannya dengan profiler adalah kebanyakan informasi yang diberikan adalah First Contentful Paint/Time to Interactive dan seterusnya. Tetapi jika diasumsikan terdapat sebuah tabel yang dirender setiap kali state berubah atau sebuah komponen terlalu lama memakan waktu untuk dimuat, bagaimana caramu menemukannya?
Solusinya adalah dengan menggunakan React Profiler.
Kita dapat melihat komponen mana yang memakan waktu terlalu lama untuk dirender, lalu kita juga dapat mememoisasi (memoize) komponen/fungsi yang terlalu lama untuk di render.
# Q2: Bagaimana caramu mendesain aplikasi React yang renggang (tidak banyak hubungan antar komponen)?
# Solusi
- Jangan mengulang dirimu sendiri: Ketika kamu menyadari bahwa kamu mengulang banyak kode, buatlah komponen baru/function dan pecah kedalam bagian yang lebih kecil
- Cobalah memindahkan API Call ke komponen paling atas
- Cobalah mengurangi jumlah props yang dikirimkan ke komponen
- Cobalah gunakan Higher Order Components ketika memungkinkan
- Bagi fitur-fitur ke reducers tersendiri
- Gunakan side-effect manager seperti Redux-Saga untuk mengatasi side effect.
Semakin renggang desain aplikasi React, semakin tinggi skalabilitasnya.
# Q3: Kapan harus menggunakan Redux Thunk dan Redux Saga?
Catatan: Redux Thunk hanya 10 baris kode termasuk nama function & kurung kurawal (~300 bytes). Sedangkan Redux-Saga sekitar 13kb.
# Solusi
Jika kamu membuat beberapa situs web dengan skala kecil, gunakanlah Redux Thunk. Memakai Redux Saga berarti membawa thread lebih ke aplikasi webmu dimana dapat dengan mudah mengatasi side effect apapun, semuanya berkat generator functions.
# Q4: Apakah mungkin menerapkan Two Way Data Binding di React?
# Solusi
React memiliki one way data binding, itu berarti alur data hanya berasal dari child, komponen child tidak bisa meng-update data secara langsung. Diperlukan penugasan ke beberapa action/pemanggilan function yang diperlukan untuk meng-update data.
Namun, dalam beberapa kasus two way data binding bisa saja diperlukan. Jadi, bagaimana caramu menerapkan two way data binding? React menyediakan beberapa function untuk melakukan hal tersebut.
# Q5: Apa itu Synthetic Events di React?
# Solusi
Banyak dari kita yang menggunakan Synthetic Events di React namun banyak pula yang tidak mengetahuinya.
Mengutip dari dokumentasi React terkait Synthetic Events:
Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.
Kurang lebih berarti bahwa event handlers-mu akan dikirimkan ke instance dari SyntheticEvent, sebuah pembungkus cross-browser disekitar native event milik browser. Memiliki interface yang sama seperti native event milik browser, termasuk function stopPropagation() dan preventDefault(), kecuali event tersebut bekerja bersifat identik di semua browser.
# Referensi
Abhisek Raj - Top Interview Questions for Frontend Developers(React) (opens new window)