From 622586221b06f7db5b7097c4ad475cbe193ab9ab Mon Sep 17 00:00:00 2001 From: ceavinrufus <18221162@std.stei.itb.ac.id> Date: Tue, 9 Apr 2024 22:36:44 +0700 Subject: [PATCH 1/4] docs: translate 'Rules of React' --- src/content/reference/rules/index.md | 42 ++++++++++++++-------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index dd5f7456c..f2ee23314 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -1,9 +1,9 @@ --- -title: Rules of React +title: Aturan React --- -Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications. +Sama seperti bahasa pemrograman lain yang memiliki cara tersendiri untuk mengekspresikan konsep, React memiliki idiom atau aturannya sendiri untuk menulis pola dengan cara yang mudah dipahami dan menghasilkan aplikasi berkualitas tinggi. @@ -11,42 +11,42 @@ Just as different programming languages have their own ways of expressing concep --- -To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react). +Untuk mempelajari lebih lanjut tentang mengekspresikan antarmuka dengan React, kami sarankan untuk membaca [Cara Berpikir dengan React](/learn/thinking-in-react). -This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools. +Bagian ini menjelaskan aturan yang perlu Anda ikuti untuk menulis kode React yang idiomatis. Menulis kode React yang idiomatis dapat membantu Anda menulis aplikasi yang terorganisisasi dengan baik, aman, dan dapat disusun. Hal ini membuat aplikasi Anda lebih tahan terhadap perubahan dan memudahkan bekerja dengan pengembang, pustaka (_library_), dan alat lain. -These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about. +Aturan-aturan ini dikenal sebagai **Aturan React**. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika aturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki _bug_. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan. -We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable. +Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [_plugin_ ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode Anda mematuhi Aturan React. Dengan mengikuti Aturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara. --- -## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/} +## Komponen dan _Hooks_ harus murni {/*components-and-hooks-must-be-pure*/} -[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code. +[Kemurnian dalam Komponen dan _Hooks_](/reference/rules/components-and-hooks-must-be-pure) adalah aturan utama React yang membuat aplikasi Anda dapat diprediksi, mudah di-_debug_, dan memungkinkan React mengoptimalkan kode Anda secara otomatis. -* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context. -* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience. -* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly. -* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook. -* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created. +* [Komponen harus _idempotent_](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Komponen React diasumsikan selalu mengembalikan output yang sama terkait dengan inputnya – _props_, _state_, dan _context_. +* [Efek samping harus dijalankan di luar _render_](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Efek samping tidak boleh dijalankan dalam _render_, karena React dapat me-_render_ komponen beberapa kali untuk menciptakan pengalaman pengguna sebaik mungkin. +* [_Props_ dan _state_ adalah sesuatu yang _immutable_](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – _Props_ dan _state_ suatu komponen adalah _snapshot_ yang _immutable_ untuk sekali _render_. Jangan pernah mengubahnya secara langsung. +* [Nilai kembalian dan argumen ke _Hooks_ adalah sesuatu yang _immutable_](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Setelah nilai dioper ke sebuah _Hook_, Anda tidak boleh mengubahnya. Seperti _props_ dalam JSX, nilai menjadi _immutable_ saat dioper ke _Hook_. +* [Nilai menjadi _immutable_ setelah dioper ke JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Jangan ubah nilai setelah digunakan di JSX. Pindahkan perubahan (_mutation_) sebelum JSX dibuat. --- -## React calls Components and Hooks {/*react-calls-components-and-hooks*/} +## React memanggil Komponen dan _Hooks_ {/*react-calls-components-and-hooks*/} -[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user. +[React bertanggung jawab untuk me-_render_ komponen-komponen dan _hooks_ bila diperlukan untuk mengoptimalkan pengalaman pengguna.](/reference/rules/react-calls-components-and-hooks) React bersifat deklaratif: Anda memberi tahu React apa yang akan di-_render_ dalam logika komponen Anda, dan React akan menentukan cara terbaik untuk menampilkannya kepada pengguna Anda. -* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions. -* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value. +* [Jangan pernah memanggil fungsi komponen secara langsung](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Komponen hanya boleh digunakan di JSX. Jangan panggil mereka sebagai fungsi biasa. +* [Jangan pernah mengoper _hooks_ sebagai nilai biasa](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – _Hooks_ hanya boleh dipanggil di dalam komponen. Jangan pernah mengopernya sebagai nilai biasa. --- -## Rules of Hooks {/*rules-of-hooks*/} +## Aturan _Hooks_ {/*rules-of-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. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them. +Meskipun _Hooks_ ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi [Aturan _Hooks_](/reference/rules/rules-of-hooks) saat menggunakannya. -* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. -* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions. +* [Panggil _Hooks_ hanya di tingkat teratas](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Jangan panggil _Hooks_ di dalam perulangan (_loop_), kondisi (_if/else_), atau fungsi bersarang. Sebagai gantinya, selalu gunakan _Hooks_ di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada). +* [Panggil _Hooks_ hanya dari fungsi React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Jangan panggil _Hooks_ dari fungsi JavaScript biasa. From aa3f3431141beeef11422d442972782ed36267b3 Mon Sep 17 00:00:00 2001 From: ceavinrufus <18221162@std.stei.itb.ac.id> Date: Tue, 9 Apr 2024 22:41:53 +0700 Subject: [PATCH 2/4] docs: quoting codebase --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index f2ee23314..5af88512f 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -18,7 +18,7 @@ Bagian ini menjelaskan aturan yang perlu Anda ikuti untuk menulis kode React yan Aturan-aturan ini dikenal sebagai **Aturan React**. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika aturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki _bug_. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan. -Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [_plugin_ ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode Anda mematuhi Aturan React. Dengan mengikuti Aturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara. +Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [_plugin_ ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode (codebase) Anda mematuhi Aturan React. Dengan mengikuti Aturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara. --- From a7da5e9810a543604eea134e7dfff65189a148ad Mon Sep 17 00:00:00 2001 From: ceavinrufus <18221162@std.stei.itb.ac.id> Date: Wed, 10 Apr 2024 13:30:26 +0700 Subject: [PATCH 3/4] docs: update translation --- src/content/reference/rules/index.md | 36 ++++++++++++++-------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index 5af88512f..c7b8b8996 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -1,5 +1,5 @@ --- -title: Aturan React +title: Peraturan React --- @@ -14,39 +14,39 @@ Sama seperti bahasa pemrograman lain yang memiliki cara tersendiri untuk mengeks Untuk mempelajari lebih lanjut tentang mengekspresikan antarmuka dengan React, kami sarankan untuk membaca [Cara Berpikir dengan React](/learn/thinking-in-react). -Bagian ini menjelaskan aturan yang perlu Anda ikuti untuk menulis kode React yang idiomatis. Menulis kode React yang idiomatis dapat membantu Anda menulis aplikasi yang terorganisisasi dengan baik, aman, dan dapat disusun. Hal ini membuat aplikasi Anda lebih tahan terhadap perubahan dan memudahkan bekerja dengan pengembang, pustaka (_library_), dan alat lain. +Bagian ini menjelaskan peraturan yang perlu Anda ikuti untuk menulis kode React yang idiomatis. Menulis kode React yang idiomatis dapat membantu Anda menulis aplikasi yang terorganisisasi dengan baik, aman, dan dapat disusun. Hal ini membuat aplikasi Anda lebih tahan terhadap perubahan dan memudahkan bekerja dengan pengembang, pustaka (*library*), dan alat lain. -Aturan-aturan ini dikenal sebagai **Aturan React**. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika aturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki _bug_. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan. +Peraturan ini dikenal sebagai **Peraturan React**. Ini adalah aturan, bukan sekadar pedoman, yang dalam artian jika peraturan tersebut dilanggar, kemungkinan besar aplikasi Anda memiliki *bug*. Kode Anda juga menjadi tidak idiomatis dan lebih sulit untuk dipahami dan dipikirkan. -Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [_plugin_ ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode (codebase) Anda mematuhi Aturan React. Dengan mengikuti Aturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara. +Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMode) bersama dengan [*plugin* ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) untuk React, untuk membantu basis kode (*codebase*) Anda mematuhi Peraturan React. Dengan mengikuti Peraturan React, Anda akan dapat menemukan dan mengatasi bug ini dan menjaga aplikasi Anda tetap dapat dipelihara. --- -## Komponen dan _Hooks_ harus murni {/*components-and-hooks-must-be-pure*/} +## Komponen dan *Hooks* harus murni {/*components-and-hooks-must-be-pure*/} -[Kemurnian dalam Komponen dan _Hooks_](/reference/rules/components-and-hooks-must-be-pure) adalah aturan utama React yang membuat aplikasi Anda dapat diprediksi, mudah di-_debug_, dan memungkinkan React mengoptimalkan kode Anda secara otomatis. +[Kemurnian dalam Komponen dan *Hooks*](/reference/rules/components-and-hooks-must-be-pure) adalah peraturan utama React yang membuat aplikasi Anda dapat diprediksi, mudah di-*debug*, dan memungkinkan React mengoptimalkan kode Anda secara otomatis. -* [Komponen harus _idempotent_](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Komponen React diasumsikan selalu mengembalikan output yang sama terkait dengan inputnya – _props_, _state_, dan _context_. -* [Efek samping harus dijalankan di luar _render_](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Efek samping tidak boleh dijalankan dalam _render_, karena React dapat me-_render_ komponen beberapa kali untuk menciptakan pengalaman pengguna sebaik mungkin. -* [_Props_ dan _state_ adalah sesuatu yang _immutable_](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – _Props_ dan _state_ suatu komponen adalah _snapshot_ yang _immutable_ untuk sekali _render_. Jangan pernah mengubahnya secara langsung. -* [Nilai kembalian dan argumen ke _Hooks_ adalah sesuatu yang _immutable_](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Setelah nilai dioper ke sebuah _Hook_, Anda tidak boleh mengubahnya. Seperti _props_ dalam JSX, nilai menjadi _immutable_ saat dioper ke _Hook_. -* [Nilai menjadi _immutable_ setelah dioper ke JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Jangan ubah nilai setelah digunakan di JSX. Pindahkan perubahan (_mutation_) sebelum JSX dibuat. +* [Komponen harus *idempotent*](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Komponen React diasumsikan selalu mengembalikan output yang sama terkait dengan inputnya – *props*, *state*, dan *context*. +* [Efek samping harus dijalankan di luar *render*](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Efek samping tidak boleh dijalankan dalam *render*, karena React dapat me-*render* komponen beberapa kali untuk menciptakan pengalaman pengguna sebaik mungkin. +* [*Props* dan *state* adalah sesuatu yang *immutable*](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – *Props* dan *state* suatu komponen adalah *snapshot* yang *immutable* untuk sekali *render*. Jangan pernah mengubahnya secara langsung. +* [Nilai kembalian dan argumen ke *Hooks* adalah sesuatu yang *immutable*](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Setelah nilai dioper ke sebuah *Hook*, Anda tidak boleh mengubahnya. Seperti *props* dalam JSX, nilai menjadi *immutable* saat dioper ke *Hook*. +* [Nilai menjadi *immutable* setelah dioper ke JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Jangan ubah nilai setelah digunakan di JSX. Pindahkan perubahan (*mutation*) sebelum JSX dibuat. --- -## React memanggil Komponen dan _Hooks_ {/*react-calls-components-and-hooks*/} +## React memanggil Komponen dan *Hooks* {/*react-calls-components-and-hooks*/} -[React bertanggung jawab untuk me-_render_ komponen-komponen dan _hooks_ bila diperlukan untuk mengoptimalkan pengalaman pengguna.](/reference/rules/react-calls-components-and-hooks) React bersifat deklaratif: Anda memberi tahu React apa yang akan di-_render_ dalam logika komponen Anda, dan React akan menentukan cara terbaik untuk menampilkannya kepada pengguna Anda. +[React bertanggung jawab untuk me-*render* komponen-komponen dan *hooks* bila diperlukan untuk mengoptimalkan pengalaman pengguna.](/reference/rules/react-calls-components-and-hooks) React bersifat deklaratif: Anda memberi tahu React apa yang akan di-*render* dalam logika komponen Anda, dan React akan menentukan cara terbaik untuk menampilkannya kepada pengguna Anda. * [Jangan pernah memanggil fungsi komponen secara langsung](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Komponen hanya boleh digunakan di JSX. Jangan panggil mereka sebagai fungsi biasa. -* [Jangan pernah mengoper _hooks_ sebagai nilai biasa](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – _Hooks_ hanya boleh dipanggil di dalam komponen. Jangan pernah mengopernya sebagai nilai biasa. +* [Jangan pernah mengoper *hooks* sebagai nilai biasa](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – *Hooks* hanya boleh dipanggil di dalam komponen. Jangan pernah mengopernya sebagai nilai biasa. --- -## Aturan _Hooks_ {/*rules-of-hooks*/} +## Peraturan *Hooks* {/*rules-of-hooks*/} -Meskipun _Hooks_ ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi [Aturan _Hooks_](/reference/rules/rules-of-hooks) saat menggunakannya. +Meskipun *Hooks* ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi [Peraturan *Hooks*](/reference/rules/rules-of-hooks) saat menggunakannya. -* [Panggil _Hooks_ hanya di tingkat teratas](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Jangan panggil _Hooks_ di dalam perulangan (_loop_), kondisi (_if/else_), atau fungsi bersarang. Sebagai gantinya, selalu gunakan _Hooks_ di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada). -* [Panggil _Hooks_ hanya dari fungsi React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Jangan panggil _Hooks_ dari fungsi JavaScript biasa. +* [Panggil *Hooks* hanya di tingkat atas](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Jangan panggil *Hooks* di dalam perulangan (*loop*), kondisi (*if/else*), atau fungsi bersarang. Sebagai gantinya, selalu gunakan *Hooks* di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada). +* [Panggil *Hooks* hanya dari fungsi React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Jangan panggil *Hooks* dari fungsi JavaScript biasa. From 45c953994afc85a8eff6f1c2c33149b1894f2350 Mon Sep 17 00:00:00 2001 From: Ceavin Rufus <100670518+ceavinrufus@users.noreply.github.com> Date: Thu, 11 Apr 2024 02:26:52 +0700 Subject: [PATCH 4/4] Update src/content/reference/rules/index.md Co-authored-by: RiN --- src/content/reference/rules/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/rules/index.md b/src/content/reference/rules/index.md index c7b8b8996..5b9d4db03 100644 --- a/src/content/reference/rules/index.md +++ b/src/content/reference/rules/index.md @@ -45,7 +45,7 @@ Kami sangat merekomendasikan penggunaan [Strict Mode](/reference/react/StrictMod ## Peraturan *Hooks* {/*rules-of-hooks*/} -Meskipun *Hooks* ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan Hook. Anda perlu mematuhi [Peraturan *Hooks*](/reference/rules/rules-of-hooks) saat menggunakannya. +Meskipun *Hooks* ditulis menggunakan fungsi JavaScript, mereka memiliki fungsi khusus sebagai logika antarmuka yang dapat digunakan kembali. Namun, ada batasan terkait saat Anda bisa menggunakan *Hook*. Anda perlu mematuhi [Peraturan *Hooks*](/reference/rules/rules-of-hooks) saat menggunakannya. * [Panggil *Hooks* hanya di tingkat atas](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Jangan panggil *Hooks* di dalam perulangan (*loop*), kondisi (*if/else*), atau fungsi bersarang. Sebagai gantinya, selalu gunakan *Hooks* di level paling atas fungsi React Anda, sebelum kembalian awal (jika ada). * [Panggil *Hooks* hanya dari fungsi React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Jangan panggil *Hooks* dari fungsi JavaScript biasa.