Apa itu JSX ? dan bagaimana bisa dirender di HTML ?
React.createElement('h1', null, 'Hello, Ubay!')
Jelaskan lifecycle dari ReactJS?
Lifecycle adalah serangkaian metode yang dipanggil selama siklus hidup suatu komponen.
Mounting: constructor(), render(), componentDidMount()
Updating: shouldComponentUpdate(), render(), componentDidUpdate()
Unmounting: componentWillUnmount()
Pada Hooks, lifecycle” ini bisa digantikan dengan useEffect().
Jelaskan perbedaan Real DOM vs Virtual DOM!
| Fitur | Real DOM | Virtual DOM |
|---|---|---|
| Performa | Lambat | Cepat |
| Rendering | Mengubah semua elemen | Hanya mengubah elemen yang berubah |
| Efisiensi | Tidak optimal | Optimal dengan Diffing Algorithm (membandingkan Virtual DOM lama & baru) |
Mengapa ReactJS menggunakan virtual DOM dan bukan real DOM?
Apa kegunaan prop key, dan apa yang terjadi jika tidak menggunakannya?
Kapan dan Mengapa menggunakan State Management dan tidak?
Apa saja Hooks yang pernah digunakan? Jelaskan juga setiap kegunaannya
| Hook | Fungsi |
|---|---|
| useState | Menyimpan state lokal |
| useEffect | Menjalankan efek samping (API call, event listener, dll.) |
| useContext | Menggunakan nilai dari Context API |
| useMemo | Optimalisasi perhitungan berat |
| useCallback | Optimalisasi fungsi agar tidak berubah setiap render |
| useRef | Menyimpan referensi tanpa menyebabkan re-render |
| useReducer | Alternatif useState untuk manajemen state yang kompleks |
Mengapa Hooks harus selalu dipanggil di top-level sebuah component?
Apa itu high order component?
// component dengan HOC
const withBorder = (Component) => (props) => (
<div style={{ border: '1px solid red' }}>
<Component {...props} />
</div>
)
// component button
const Button = () => {
return <button>Click me</button>
}
export default withBorder(Button)
Kapan harus pake context kapan harus pake redux?
| Kriteria | Context API | Redux |
|---|---|---|
| Kompleksitas | Sederhana | Kompleks |
| Skala | Kecil hingga menengah | Besar |
| Performanya | Bagus untuk state kecil | Lebih efisien untuk state besar |
Apa bedanya pure component sama functional component?
Apa perbedaan Class Component dengan Functional Component?
| Jenis | Class Component | Functional Component |
|---|---|---|
| Sintaks | Menggunakan class | Menggunakan function |
| State | this.state | useState() |
| Lifecycle | componentDidMount() | useEffect() |
React lebih merekomendasikan Functional Component karena lebih ringan dan mudah dibaca.
Apa itu SSR dan CSR, kapan kita harus make CSR atau SSR?
SSR dan CSR adalah dua teknik dalam rendering halaman web. Masing-masing punya kelebihan dan kekurangan tergantung pada kebutuhan aplikasi.
Perbedaan Controlled vs uncontrolled components di React?
Bagaimana cara agar browser dan server dapat berkomunikasi tanpa reload halaman?
Apa itu memoization? Apa manfaatnya dalam aplikasi React?
useMemo(): Mencegah perhitungan ulang nilai.
useCallback(): Mencegah pembuatan ulang fungsi.
Manfaat: Meningkatkan performa dengan menghindari render ulang yang tidak perlu.
Bagaimana perbedaan pengunaan useMemo dan useCallback?
import { useState } from 'react'
function ExpensiveComponent({ numbers }) {
const sum = numbers.reduce((acc, num) => acc + num, 0) // Perhitungan berat
return <div>Sum: {sum}</div>
}
export default function App() {
const [count, setCount] = useState(0)
const numbers = Array.from({ length: 1000000 }, (_, i) => i + 1) // Data besar
return (
<div>
<ExpensiveComponent numbers={numbers} />
<button onClick={() => setCount(count + 1)}>Increment {count}</button>
</div>
)
}
🔴 Masalah:
- Setiap kali tombol diklik, perhitungan reduce dijalankan ulang, padahal tidak ada perubahan pada numbers.
- Ini memperlambat UI karena perhitungan yang berat selalu dilakukan ulang.
import { useState, useMemo } from 'react'
function ExpensiveComponent({ numbers }) {
const sum = useMemo(() => {
console.log('Calculating sum...')
return numbers.reduce((acc, num) => acc + num, 0)
}, [numbers]) // Hanya dihitung ulang jika `numbers` berubah
return <div>Sum: {sum}</div>
}
export default function App() {
const [count, setCount] = useState(0)
const numbers = Array.from({ length: 1000000 }, (_, i) => i + 1) // Data besar
return (
<div>
<ExpensiveComponent numbers={numbers} />
<button onClick={() => setCount(count + 1)}>Increment {count}</button>
</div>
)
}
✅ Keuntungan useMemo
- Perhitungan reduce tidak dieksekusi ulang setiap kali state berubah.
- Hanya dihitung saat numbers berubah, meningkatkan performa.
import { useState } from 'react'
function Child({ onClick }) {
console.log('Child re-rendered!')
return <button onClick={onClick}>Click Me</button>
}
export default function App() {
const [count, setCount] = useState(0)
const handleClick = () => {
console.log('Button clicked!')
}
return (
<div>
<Child onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Increment {count}</button>
</div>
)
}
🔴 Masalah:
- Setiap kali App re-render (karena count berubah), handleClick dibuat ulang.
- Child selalu re-render meskipun onClick tidak berubah (karena dianggap sebagai fungsi baru).
import { useState, useCallback } from 'react'
function Child({ onClick }) {
console.log('Child re-rendered!')
return <button onClick={onClick}>Click Me</button>
}
export default function App() {
const [count, setCount] = useState(0)
const handleClick = useCallback(() => {
console.log('Button clicked!')
}, []) // Fungsi hanya dibuat sekali
return (
<div>
<Child onClick={handleClick} />
<button onClick={() => setCount(count + 1)}>Increment {count}</button>
</div>
)
}
✅ Keuntungan useCallback
- handleClick tidak dibuat ulang setiap render (hanya dibuat sekali).
- Child tidak akan re-render kecuali ada perubahan pada onClick.
- Menghemat performa pada komponen yang sering menerima fungsi sebagai prop.
Apa itu React Router?