diff --git a/src/content/reference/rules/rules-of-hooks.md b/src/content/reference/rules/rules-of-hooks.md index ecaef7c60..90c739ee3 100644 --- a/src/content/reference/rules/rules-of-hooks.md +++ b/src/content/reference/rules/rules-of-hooks.md @@ -1,53 +1,53 @@ --- -title: Rules of Hooks +title: Peraturan Hooks --- -Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. +Hooks didefinisikan menggunakan fungsi JavaScript, tetapi Hooks merepresentasikan tipe khusus dari logika UI yang dapat digunakan kembali dengan batasan di mana hooks tersebut dapat dipanggil. --- -## Only call Hooks at the top level {/*only-call-hooks-at-the-top-level*/} +## Panggil *Hooks* hanya di tingkat atas {/*only-call-hooks-at-the-top-level*/} -Functions whose names start with `use` are called [*Hooks*](/reference/react) in React. +Fungsi-fungsi yang namanya berawalan `use` disebut [*Hooks*](/reference/react) dalam React. -**Don’t call Hooks inside loops, conditions, nested functions, or `try`/`catch`/`finally` blocks.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component: +**Jangan memanggil *Hooks* di dalam pengulangan, kondisi, fungsi bersarang, atau blok `try`/`catch`/`finally`.** Sebagai gantinya, selalu gunakan Hooks di tingkat teratas fungsi React Anda, sebelum kembalian awal apapun. Anda hanya dapat memanggil *Hooks* ketika React sedang me-*render* komponen fungsi: -* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component). -* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks). +* ✅ Panggil *Hooks* di tingkat teratas di dalam [komponen fungsi](/learn/your-first-component). +* ✅ Panggil *Hooks* di tingkat teratas di dalam [*Hook* kustom](/learn/reusing-logic-with-custom-hooks). ```js{2-3,8-9} function Counter() { - // ✅ Good: top-level in a function component + // ✅ Baik: tingkat atas dalam komponen fungsi const [count, setCount] = useState(0); // ... } function useWindowWidth() { - // ✅ Good: top-level in a custom Hook + // ✅ Baik: tingkat atas dalam Hook kustom const [width, setWidth] = useState(window.innerWidth); // ... } ``` -It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example: +Memanggil Hooks (fungsi yang dimulai dengan `use`) dalam kasus penggunaan lainnya **tidak** diduking, misalnya: -* 🔴 Do not call Hooks inside conditions or loops. -* 🔴 Do not call Hooks after a conditional `return` statement. -* 🔴 Do not call Hooks in event handlers. -* 🔴 Do not call Hooks in class components. -* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`. -* 🔴 Do not call Hooks inside `try`/`catch`/`finally` blocks. +* 🔴 Jangan memanggil *Hooks* di dalam kondisional atau pengulangan. +* 🔴 Jangan memanggil *Hooks* setelah pernyataan `return` kondisional. +* 🔴 Jangan memanggil *Hooks* di dalam *event handler*. +* 🔴 Jangan memanggil *Hooks* di dalam komponen kelas. +* 🔴 Jangan memanggil *Hooks* di dalam fungsi yang dioper ke `useMemo`, `useReducer`, atau `useEffect`. +* 🔴 Jangan memanggil *Hooks* di dalam blok `try`/`catch`/`finally`. -If you break these rules, you might see this error. +Jika Anda melanggar peraturan ini, kemungkinan Anda akan melihat *error* berikut. ```js{3-4,11-12,20-21} function Bad({ cond }) { if (cond) { - // 🔴 Bad: inside a condition (to fix, move it outside!) + // 🔴 Buruk: di dalam kondisional (untuk memperbaiki, pindahkan ke luar!) const theme = useContext(ThemeContext); } // ... @@ -55,7 +55,7 @@ function Bad({ cond }) { function Bad() { for (let i = 0; i < 10; i++) { - // 🔴 Bad: inside a loop (to fix, move it outside!) + // 🔴 Buruk: di dalam pengulangan (untuk memperbaiki, pindahkan ke luar!) const theme = useContext(ThemeContext); } // ... @@ -65,14 +65,14 @@ function Bad({ cond }) { if (cond) { return; } - // 🔴 Bad: after a conditional return (to fix, move it before the return!) + // 🔴 Buruk: setelah pengembalian kondisional (untuk memperbaiki, pindahkan ke sebelum return!) const theme = useContext(ThemeContext); // ... } function Bad() { function handleClick() { - // 🔴 Bad: inside an event handler (to fix, move it outside!) + // 🔴 Buruk: di dalam event handler (untuk memperbaiki, pindahkan ke luar!) const theme = useContext(ThemeContext); } // ... @@ -80,7 +80,7 @@ function Bad() { function Bad() { const style = useMemo(() => { - // 🔴 Bad: inside useMemo (to fix, move it outside!) + // 🔴 Buruk: di dalam useMemo (untuk memperbaiki, pindahkan ke luar!) const theme = useContext(ThemeContext); return createStyle(theme); }); @@ -89,7 +89,7 @@ function Bad() { class Bad extends React.Component { render() { - // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!) + // 🔴 Buruk: di dalam komponen kelas (untuk memperbaiki, buat komponen fungsi dan bukan komponen kelas!) useEffect(() => {}) // ... } @@ -97,7 +97,7 @@ class Bad extends React.Component { function Bad() { try { - // 🔴 Bad: inside try/catch/finally block (to fix, move it outside!) + // 🔴 Buruk: di dalam blok try/catch/finally (untuk memperbaiki, pindahkan ke luar!) const [x, setX] = useState(0); } catch { const [x, setX] = useState(1); @@ -105,31 +105,31 @@ function Bad() { } ``` -You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes. +Anda dapat menggunakan [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk menangkap kesalahan-kesalahan ini. -[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering. +[*Hooks* kustom](/learn/reusing-logic-with-custom-hooks) *mungkin* memanggil *Hooks* lain (memang itu tujuannya). Ini bekerja karena *Hooks* kustom juga seharusnya hanya dipanggil saat komponen fungsi sedang di-*render*. --- -## Only call Hooks from React functions {/*only-call-hooks-from-react-functions*/} +## Panggil *Hooks* hanya dari fungsi React {/*only-call-hooks-from-react-functions*/} -Don’t call Hooks from regular JavaScript functions. Instead, you can: +Jangan memanggil *Hooks* dari fungsi JavaScript reguler. Sebagai gantinya, Anda dapat: -✅ Call Hooks from React function components. -✅ Call Hooks from [custom Hooks](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component). +✅ Memanggil *Hooks* dari komponen fungsi React. +✅ Memanggil *Hooks* dari [*Hooks* kustom](/learn/reusing-logic-with-custom-hooks#extracting-your-own-custom-hook-from-a-component). -By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. +Dengan mengikuti peraturan ini, Anda memastikan semua logika *stateful* dalam suatu komponen terlihat jelas dari kode sumbernya. ```js {2,5} function FriendList() { const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅ } -function setOnlineStatus() { // ❌ Not a component or custom Hook! +function setOnlineStatus() { // ❌ Bukan sebuah komponen atau Hooks kustom! const [onlineStatus, setOnlineStatus] = useOnlineStatus(); } ```