From 9c42eb562ffe91ea6d156eff89e5bf04eddfc7ca Mon Sep 17 00:00:00 2001 From: intanirnanda5796 Date: Fri, 28 Apr 2023 08:43:51 +0700 Subject: [PATCH 1/4] progress and draft --- src/content/reference/react/useCallback.md | 30 +++++++++++----------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index 63b36a600..b56a49e07 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -4,7 +4,7 @@ title: useCallback -`useCallback` is a React Hook that lets you cache a function definition between re-renders. +`useCallback` adalah sebuah React Hook yang memungkinkan Anda untuk meng-cache sebuah definisi fungsi diantara render ulang. ```js const cachedFn = useCallback(fn, dependencies) @@ -16,11 +16,11 @@ const cachedFn = useCallback(fn, dependencies) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `useCallback(fn, dependencies)` {/*usecallback*/} -Call `useCallback` at the top level of your component to cache a function definition between re-renders: +Panggil fungsi `useCallback` di tingkat atas komponen Anda untuk meng-cache sebuah definisi fungsi diantara render ulang: ```js {4,9} import { useCallback } from 'react'; @@ -34,30 +34,30 @@ export default function ProductPage({ productId, referrer, theme }) { }, [productId, referrer]); ``` -[See more examples below.](#usage) +[Lihat contoh lainnya di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `fn`: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On next renders, React will give you the same function again if the `dependencies` have not changed since the last render. Otherwise, it will give you the function that you have passed during the current render, and store it in case it can be reused later. React will not call your function. The function is returned to you so you can decide when and whether to call it. +* `fn`: Nilai fungsi yang ingin Anda simpan dalam cache. ini dapat menerima argument apa saja dan mengembalikan nilai apa saja. React akan mengembalikan (tidak memanggil!) fungsi Anda kembali kepada Anda selama render awal. Pada render selanjutnya, React akan memberikan fungsi yang sama kepada Anda lagi jika `dependencies` tidak berubah sejak render sebelumnya. Jika tidak, itu akan memberi Anda fungsi yang telah Anda lewati selama render saat ini, dan menyimpannya jika nanti dapat digunakan kembali. React tidak akan memanggil fungsi Anda. Fungsi tersebut dikembalikan kepada kamu agar kamu bisa memutuskan kapan dan apakah akan memanggilnya. -* `dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. +* `dependencies`: Daftar dari semua nilai yang bersifat reaktif yang direferensikan di dalam kode `fn`. Nilai-nilai reaktif termasuk props, state, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam badan komponen. jika linter Anda adalah [dikonfigurasi untuk React](/learn/editor-setup#linting), linter akan memverifikasi bahwa setiap nilai reaktif telah ditentukan dengan benar sebagai dependensi. Daftar dependensi harus memiliki jumlah item yang konstan dan ditulis dalam satu baris seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilainya yang sebelumnya menggunakan algorithma perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). -#### Returns {/*returns*/} +#### Pengembalian {/*returns*/} -On the initial render, `useCallback` returns the `fn` function you have passed. +Pada render awal, `useCallback` mengembalikan fungsi `fn` yang telah Anda lewati. -During subsequent renders, it will either return an already stored `fn` function from the last render (if the dependencies haven't changed), or return the `fn` function you have passed during this render. +Selama render berikutnya, useCallback akan mengembalikan fungsi `fn` yang sudah tersimpan dari render terakhir (jika dependensi tidak berubah), atau mengembalikan fungsi `fn` yang telah kamu lewati selama render ini. -#### Caveats {/*caveats*/} +#### Peringatan {/*caveats*/} -* `useCallback` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it. -* React **will not throw away the cached function unless there is a specific reason to do that.** For example, in development, React throws away the cache when you edit the file of your component. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on `useCallback` as a performance optimization. Otherwise, a [state variable](/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. +* `useCallback` adalah sebuah Hook, jadi Anda hanya dapat memanggil useCallback **di tingkat atas komponen Anda** atau Hooks yang Anda buat sendiri. Anda tidak dapat memanggil useCallback di dalam looping atau kondisi. Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan state ke dalamnya. +* React **tidak akan membuang fungsi yang sudah di-cache kecuali ada alasan khusus untuk melakukannya.** Sebagai contoh, pada saat pengembangan, React akan membuang cache ketika Anda mengedit file komponen Anda. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on `useCallback` as a performance optimization. Otherwise, a [state variable](/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Skipping re-rendering of components {/*skipping-re-rendering-of-components*/} +### Melewati proses render ulang sebuah Komponen {/*skipping-re-rendering-of-components*/} When you optimize rendering performance, you will sometimes need to cache the functions that you pass to child components. Let's first look at the syntax for how to do this, and then see in which cases it's useful. From 0c7db672903043c2ead98fc0b76a425f2169a4da Mon Sep 17 00:00:00 2001 From: intanirnanda5796 Date: Sat, 29 Apr 2023 19:15:16 +0700 Subject: [PATCH 2/4] finish translation useCallback --- src/content/reference/react/useCallback.md | 205 +++++++++++---------- 1 file changed, 103 insertions(+), 102 deletions(-) diff --git a/src/content/reference/react/useCallback.md b/src/content/reference/react/useCallback.md index b56a49e07..228aebf8b 100644 --- a/src/content/reference/react/useCallback.md +++ b/src/content/reference/react/useCallback.md @@ -38,7 +38,7 @@ export default function ProductPage({ productId, referrer, theme }) { #### Parameter {/*parameters*/} -* `fn`: Nilai fungsi yang ingin Anda simpan dalam cache. ini dapat menerima argument apa saja dan mengembalikan nilai apa saja. React akan mengembalikan (tidak memanggil!) fungsi Anda kembali kepada Anda selama render awal. Pada render selanjutnya, React akan memberikan fungsi yang sama kepada Anda lagi jika `dependencies` tidak berubah sejak render sebelumnya. Jika tidak, itu akan memberi Anda fungsi yang telah Anda lewati selama render saat ini, dan menyimpannya jika nanti dapat digunakan kembali. React tidak akan memanggil fungsi Anda. Fungsi tersebut dikembalikan kepada kamu agar kamu bisa memutuskan kapan dan apakah akan memanggilnya. +* `fn`: Nilai fungsi yang ingin Anda simpan dalam cache. ini dapat menerima argument apa saja dan mengembalikan nilai apa saja. React akan mengembalikan (tidak memanggil!) fungsi Anda kembali kepada Anda selama render awal. Pada render selanjutnya, React akan memberikan fungsi yang sama kepada Anda lagi jika `dependencies` tidak berubah sejak render sebelumnya. Jika tidak, itu akan memberi Anda fungsi yang telah Anda lewati selama render saat ini, dan menyimpannya jika nanti dapat digunakan kembali. React tidak akan memanggil fungsi Anda. Fungsi tersebut dikembalikan kepada Anda agar Anda bisa memutuskan kapan dan apakah akan memanggilnya. * `dependencies`: Daftar dari semua nilai yang bersifat reaktif yang direferensikan di dalam kode `fn`. Nilai-nilai reaktif termasuk props, state, dan semua variabel dan fungsi yang dideklarasikan langsung di dalam badan komponen. jika linter Anda adalah [dikonfigurasi untuk React](/learn/editor-setup#linting), linter akan memverifikasi bahwa setiap nilai reaktif telah ditentukan dengan benar sebagai dependensi. Daftar dependensi harus memiliki jumlah item yang konstan dan ditulis dalam satu baris seperti `[dep1, dep2, dep3]`. React akan membandingkan setiap dependensi dengan nilainya yang sebelumnya menggunakan algorithma perbandingan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is). @@ -46,12 +46,12 @@ export default function ProductPage({ productId, referrer, theme }) { Pada render awal, `useCallback` mengembalikan fungsi `fn` yang telah Anda lewati. -Selama render berikutnya, useCallback akan mengembalikan fungsi `fn` yang sudah tersimpan dari render terakhir (jika dependensi tidak berubah), atau mengembalikan fungsi `fn` yang telah kamu lewati selama render ini. +Selama render berikutnya, useCallback akan mengembalikan fungsi `fn` yang sudah tersimpan dari render terakhir (jika dependensi tidak berubah), atau mengembalikan fungsi `fn` yang telah Anda lewati selama render ini. -#### Peringatan {/*caveats*/} +#### Catatan Penting {/*caveats*/} * `useCallback` adalah sebuah Hook, jadi Anda hanya dapat memanggil useCallback **di tingkat atas komponen Anda** atau Hooks yang Anda buat sendiri. Anda tidak dapat memanggil useCallback di dalam looping atau kondisi. Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan state ke dalamnya. -* React **tidak akan membuang fungsi yang sudah di-cache kecuali ada alasan khusus untuk melakukannya.** Sebagai contoh, pada saat pengembangan, React akan membuang cache ketika Anda mengedit file komponen Anda. Both in development and in production, React will throw away the cache if your component suspends during the initial mount. In the future, React may add more features that take advantage of throwing away the cache--for example, if React adds built-in support for virtualized lists in the future, it would make sense to throw away the cache for items that scroll out of the virtualized table viewport. This should match your expectations if you rely on `useCallback` as a performance optimization. Otherwise, a [state variable](/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead) or a [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) may be more appropriate. +* React **tidak akan membuang fungsi yang sudah di-cache kecuali ada alasan khusus untuk melakukannya.** Sebagai contoh, pada saat pengembangan, React akan membuang cache ketika Anda mengedit file komponen Anda. Baik pada saat pengembangan maupun produksi, React akan membuang cache jika komponen Anda menunda (suspend) selama mounting awal. Di masa depan, React mungkin akan menambahkan fitur-fitur baru yang memanfaatkan pembuangan cache--Sebagai contoh, jika React menambahkan dukungan bawaan untuk virtualized lists di masa depan, maka masuk akal untuk membuang cache untuk item yang keluar dari virtualized table viewport tersebut. Hal ini seharusnya sesuai dengan ekspektasi Anda jika And mengandalkan `useCallback` sebagai optimasi kinerja. jika tidak, sebuah [state variable](/reference/react/useState#im-trying-to-set-state-to-a-function-but-it-gets-called-instead) atau sebuah [ref](/reference/react/useRef#avoiding-recreating-the-ref-contents) mungkin lebih sesuai. --- @@ -59,9 +59,9 @@ Selama render berikutnya, useCallback akan mengembalikan fungsi `fn` yang sudah ### Melewati proses render ulang sebuah Komponen {/*skipping-re-rendering-of-components*/} -When you optimize rendering performance, you will sometimes need to cache the functions that you pass to child components. Let's first look at the syntax for how to do this, and then see in which cases it's useful. +ketika Anda mengoptimalkan kinerja rendering, Anda terkadang perlu meng-cache fungsi yang Anda berikan ke komponen turunan. Dan kemudian, Mari kita lihat terlebih dahulu sintaksisnya, lalu kita akan melihat dalam kasus mana ini berguna. -To cache a function between re-renders of your component, wrap its definition into the `useCallback` Hook: +untuk meng-cache sebuah fungsi antara render ulang dari komponen Anda, bungkus definisi fungsi Anda ke dalam Hook `useCallback`: ```js [[3, 4, "handleSubmit"], [2, 9, "[productId, referrer]"]] import { useCallback } from 'react'; @@ -76,20 +76,20 @@ function ProductPage({ productId, referrer, theme }) { // ... ``` -You need to pass two things to `useCallback`: +Anda harus oper dua hal ke dalam `useCallback`: -1. A function definition that you want to cache between re-renders. -2. A list of dependencies including every value within your component that's used inside your function. +1. Sebuah definisi fungsi yang ingin Anda cache diantara render ulang. +2. Sebuah list dependensi termasuk setiap nilai yang ada di dalam komponen Anda yang digunakan dalam fungsi Anda. -On the initial render, the returned function you'll get from `useCallback` will be the function you passed. +Pada saat render awal, fungsi yang dikembalikan yang akan anda dapatkan dari `useCallback` akan menjadi fungsi yang anda operkan. -On the following renders, React will compare the dependencies with the dependencies you passed during the previous render. If none of the dependencies have changed (compared with [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useCallback` will return the same function as before. Otherwise, `useCallback` will return the function you passed on *this* render. +Pada render berikutnya, React akan membandingkan dependensi dengan dependensi yang Anda operkan selama render sebelumnya. jika tidak ada dependensi yang berubah (bandingkan dengan [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)), `useCallback` akan mengembalikan fungsi yang sama seperti sebelumnya. jika tidak, `useCallback` akan mengembalikan fungsi yang telah Anda operkan di render *ini*. -In other words, `useCallback` caches a function between re-renders until its dependencies change. +Dengan kata lain, `useCallback` meng-cache sebuah fungsi diantara render ulang until sampai dependesi itu berubah. -**Let's walk through an example to see when this is useful.** +**Mari kita lihat contoh untuk melihat kapan ini berguna.** -Say you're passing a `handleSubmit` function down from the `ProductPage` to the `ShippingForm` component: +katakan jika Anda mengoper fungsi `handleSubmit` di dalam `ProductPage` ke komponen `ShippingForm`: ```js {5} function ProductPage({ productId, referrer, theme }) { @@ -101,9 +101,9 @@ function ProductPage({ productId, referrer, theme }) { ); ``` -You've noticed that toggling the `theme` prop freezes the app for a moment, but if you remove `` from your JSX, it feels fast. This tells you that it's worth trying to optimize the `ShippingForm` component. +Anda akan menyadari bahwa mengganti nilai prop `theme` membuat aplikasi terasa berhenti sejenak, tapi jika Anda hapus `` dari JSX Anda, itu akan terasa lebih cepat. ini memberitahu Anda bahwa itu layak dicoba untuk optimasi komponen `ShippingForm`. -**By default, when a component re-renders, React re-renders all of its children recursively.** This is why, when `ProductPage` re-renders with a different `theme`, the `ShippingForm` component *also* re-renders. This is fine for components that don't require much calculation to re-render. But if you verified a re-render is slow, you can tell `ShippingForm` to skip re-rendering when its props are the same as on last render by wrapping it in [`memo`:](/reference/react/memo) +**Secara default, ketika sebuah komponen melakukan render ulang, React akan melakukan render ulang pada seluruh komponen turunannya secara rekursif** inilah kenapa, ketika `ProductPage` render ulang dengan `theme` berbeda, komponen `ShippingForm` *juga* render ulang. Ini bagus untuk komponen yang tidak memerlukan banyak perhitungan untuk render ulang. tapi jika anda telah memverifikasi bahwa render ulang itu lambat, Anda dapat memberitahu `ShippingForm` untuk melewati render ulang ketika props itu sama seperti render sebelumnya dengan cara bungkus itu di dalam [`memo`:](/reference/react/memo) ```js {3,5} import { memo } from 'react'; @@ -113,11 +113,11 @@ const ShippingForm = memo(function ShippingForm({ onSubmit }) { }); ``` -**With this change, `ShippingForm` will skip re-rendering if all of its props are the *same* as on the last render.** This is when caching a function becomes important! Let's say you defined `handleSubmit` without `useCallback`: +**Dengan perubahan ini, `ShippingForm` akan melewati rendering ulang jika semua props itu *sama* seperti render sebelumnya.** inilah kenapa meng-cache sebuah fungsi menjadi penting! misalkan Anda mendefinisikan `handleSubmit` tanpa `useCallback`: ```js {2,3,8,12-13} function ProductPage({ productId, referrer, theme }) { - // Every time the theme changes, this will be a different function... + // setiap kali theme berubah, ini akan menjadi fungsi yang berbeda... function handleSubmit(orderDetails) { post('/product/' + productId + '/buy', { referrer, @@ -127,47 +127,47 @@ function ProductPage({ productId, referrer, theme }) { return (
- {/* ... so ShippingForm's props will never be the same, and it will re-render every time */} + {/* ... jadi prop ShippingForm tidak akan pernah sama, dan komponen tersebut akan selalu melakukan re-render setiap kali terjadi perubahan tema */}
); } ``` -**In JavaScript, a `function () {}` or `() => {}` always creates a _different_ function,** similar to how the `{}` object literal always creates a new object. Normally, this wouldn't be a problem, but it means that `ShippingForm` props will never be the same, and your [`memo`](/reference/react/memo) optimization won't work. This is where `useCallback` comes in handy: +**Di Javascript, `function () {}` atau `() => {}` akan selalu membuat sebuah fungsi _berbeda_,** serupa dengan bagaimana literal objek `{}` selalu membuat objek baru. Normalnya, ini tidak akan menjadi sebuah masalah, tetapi ini berarti bahwa props `ShippingForm` tidak akan pernah sama, dan optimasi [`memo`](/reference/react/memo) Anda tidak akan bekerja. disinilah `useCallback` berguna: ```js {2,3,8,12-13} function ProductPage({ productId, referrer, theme }) { - // Tell React to cache your function between re-renders... + // Beritahu React untuk meng-cache fungsi Anda diantara render ulang... const handleSubmit = useCallback((orderDetails) => { post('/product/' + productId + '/buy', { referrer, orderDetails, }); - }, [productId, referrer]); // ...so as long as these dependencies don't change... + }, [productId, referrer]); // ...selama dependensi tidak berubah... return (
- {/* ...ShippingForm will receive the same props and can skip re-rendering */} + {/* ...ShippingForm akan menerima props yang sama dan dapat melewati render ulang */}
); } ``` -**By wrapping `handleSubmit` in `useCallback`, you ensure that it's the *same* function between the re-renders** (until dependencies change). You don't *have to* wrap a function in `useCallback` unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in [`memo`,](/reference/react/memo) and this lets it skip re-rendering. There are other reasons you might need `useCallback` which are described further on this page. +**Dengan membungkus `handleSubmit` dalam `useCallback`, Anda memastikan bahwa itu adalah fungsi yang *sama* antara setiap render ulang** (sampai dependensi berubah). Anda tidak *harus* bungkus sebuah fungsi dalam `useCallback` kecuali jika Anda melakukannya untuk beberapa alasan tertentu. Dalam contoh ini, alasannya adalah Anda oper itu ke komponen yang dibungkus dalam [`memo`,](/reference/react/memo) dan ini memungkinkannya untuk lewati render ulang. ada alasan lain mengapa Anda mungkin butuh `useCallback` yang dijelaskan lebih lanjut di halaman ini. -**You should only rely on `useCallback` as a performance optimization.** If your code doesn't work without it, find the underlying problem and fix it first. Then you may add `useCallback` back. +**Anda sebaiknya hanya mengandalkan `useCallback` sebagai optimasi kinerja.** jika kode Anda tidak dapat bekerja tanpa itu, cari masalah yang mendasarinya dan perbaiki terlebih dahulu. Kemudian Anda dapat menambahkan `useCallback` kembali. -#### How is useCallback related to useMemo? {/*how-is-usecallback-related-to-usememo*/} +#### Bagaimana useCallback terkait dengan useMemo? {/*how-is-usecallback-related-to-usememo*/} -You will often see [`useMemo`](/reference/react/useMemo) alongside `useCallback`. They are both useful when you're trying to optimize a child component. They let you [memoize](https://en.wikipedia.org/wiki/Memoization) (or, in other words, cache) something you're passing down: +Anda sering melihat [`useMemo`](/reference/react/useMemo) berdampingan `useCallback`. Mereka berdua berguna ketika Anda mencoba mengoptimalkan komponen turunan. mereka memungkinkan Anda [memoize](https://en.wikipedia.org/wiki/Memoization) (atau, dengan kata lain, cache) sesuatu yang Anda telah oper ke bawah: ```js {6-8,10-15,19} import { useMemo, useCallback } from 'react'; @@ -175,11 +175,11 @@ import { useMemo, useCallback } from 'react'; function ProductPage({ productId, referrer }) { const product = useData('/product/' + productId); - const requirements = useMemo(() => { // Calls your function and caches its result + const requirements = useMemo(() => { // Memanggil fungsi Anda dan menyimpan ke dalam cache return computeRequirements(product); }, [product]); - const handleSubmit = useCallback((orderDetails) => { // Caches your function itself + const handleSubmit = useCallback((orderDetails) => { // meng-cache fungsi itu sendiri post('/product/' + productId + '/buy', { referrer, orderDetails, @@ -194,60 +194,61 @@ function ProductPage({ productId, referrer }) { } ``` -The difference is in *what* they're letting you cache: +Perbedaannya terletak pada *apa* yang Anda simpan dalam cache: -* **[`useMemo`](/reference/react/useMemo) caches the *result* of calling your function.** In this example, it caches the result of calling `computeRequirements(product)` so that it doesn't change unless `product` has changed. This lets you pass the `requirements` object down without unnecessarily re-rendering `ShippingForm`. When necessary, React will call the function you've passed during rendering to calculate the result. -* **`useCallback` caches *the function itself.*** Unlike `useMemo`, it does not call the function you provide. Instead, it caches the function you provided so that `handleSubmit` *itself* doesn't change unless `productId` or `referrer` has changed. This lets you pass the `handleSubmit` function down without unnecessarily re-rendering `ShippingForm`. Your code won't run until the user submits the form. +* **[`useMemo`](/reference/react/useMemo) meng-cache *hasil* dari panggilan fungsi Anda.** Dalam contoh ini, itu meng-cache hasil pemanggilan fungsi `computeRequirements(product)` sehingga hasilnya tidak akan berubah kecuali `product` berubah. ini memungkinkan Anda untuk oper objek `requirements` tanpa perlu render ulang `ShippingForm`. Jika diperlukan, React akan memanggil fungsi yang telah Anda oper selama rendering untuk menghitung hasilnya. +* **`useCallback` meng-cache *fungsi itu sendiri.*** Berbeda dengan `useMemo`, itu tidak akan memanggil fungsi yang Anda berikan. Sebaliknya, itu akan meng-cache fungsi yang telah Anda berikan sehingga `handleSubmit` *sendiri* tidak akan berubah kecuali `productId` atau `referrer` telah berubah. Ini memungkinan Anda untuk oper fungsi `handleSubmit` ke bawah tanpa perlu render ulang `ShippingForm`. Kode Anda tidak akan dijalankan sampai pengguna submits the form. -If you're already familiar with [`useMemo`,](/reference/react/useMemo) you might find it helpful to think of `useCallback` as this: +Jika Anda sudah terbiasa dengan [`useMemo`,](/reference/react/useMemo) Anda mungkin merasa terbantu dengan `useCallback` seperti ini: ```js -// Simplified implementation (inside React) +// implementasi sederhana (didalam React) function useCallback(fn, dependencies) { return useMemo(() => fn, dependencies); } ``` -[Read more about the difference between `useMemo` and `useCallback`.](/reference/react/useMemo#memoizing-a-function) +[Baca lebih lanjut perbedaan antara `useMemo` dan `useCallback`.](/reference/react/useMemo#memoizing-a-function) -#### Should you add useCallback everywhere? {/*should-you-add-usecallback-everywhere*/} +#### Apakah Anda harus menambahkan useCallback dimana-mana? {/*should-you-add-usecallback-everywhere*/} -If your app is like this site, and most interactions are coarse (like replacing a page or an entire section), memoization is usually unnecessary. On the other hand, if your app is more like a drawing editor, and most interactions are granular (like moving shapes), then you might find memoization very helpful. +Jika aplikasi Anda seperti situs ini, dan sebagian besar interaksi bersifat kasar (seperti mengganti seluruh halaman atau sebagian), memoisasi biasanya tidak diperlukan. Di sisi lain, Jika aplikasi Anda seperti editor gambar, dan sebagian besar interaksi bersifat granular (seperti memindahkan bentuk), maka Anda mungkin menganggap memoisasi sangat membantu. -Caching a function with `useCallback` is only valuable in a few cases: +Caching fungsi dengan `useCallback` hanya bermanfaat dalam beberapa kasus: -- You pass it as a prop to a component wrapped in [`memo`.](/reference/react/memo) You want to skip re-rendering if the value hasn't changed. Memoization lets your component re-render only if dependencies changed. -- The function you're passing is later used as a dependency of some Hook. For example, another function wrapped in `useCallback` depends on it, or you depend on this function from [`useEffect.`](/reference/react/useEffect) +- Anda mengoper itu sebagai prop ke komponen yang dibungkus dalam [`memo`.](/reference/react/memo) Anda ingin melewatkan rendering ulang jika nilai tidak berubah. Memoisasi memungkinkan Anda merender ulang hanya jika dependensi berubah. +- Fungsi yang Anda operkan nantinya digunakan sebagai dependensi dari suatu Hook. contoh, fungsi lain yang dibungkus dalam `useCallback` bergantung padanya, atau Anda bergantung pada fungsi ini dari [`useEffect.`](/reference/react/useEffect) -There is no benefit to wrapping a function in `useCallback` in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside is that code becomes less readable. Also, not all memoization is effective: a single value that's "always new" is enough to break memoization for an entire component. +Jika tidak ada manfaat dari membungkus sebuah fungsi dengan `useCallback` pada kasus lain. Tidak ada kerugian yang signifikan dari melakukan itu juga, sehingga beberapa tim memilih untuk tidak memikirkan kasus-kasus individu, dan memoize sebanyak mungkin. Kekurangannya adalah kode menjadi kurang mudah dibaca. Selain itu, tidak semua memoize efektif: sebuah nilai tunggal yang "selalu baru" sudah cukup untuk menghancurkan memoisasi untuk seluruh komponen. -Note that `useCallback` does not prevent *creating* the function. You're always creating a function (and that's fine!), but React ignores it and gives you back a cached function if nothing changed. +Perhatikan bahwa `useCallback` tidak mencegah *membuat* fungsi. Anda selalu membuat fungsi (dan itu bagus!), tapi React akan mengabaikannya dan memberi Anda kembali fungsi yang sudah di-cache jika tidak ada yang berubah. -**In practice, you can make a lot of memoization unnecessary by following a few principles:** +**Dalam praktiknya, Anda dapat menghindari penggunaan memoisasi yang berlebihan dengan mengikuti beberapa prinsip:** -1. When a component visually wraps other components, let it [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) Then, if the wrapper component updates its own state, React knows that its children don't need to re-render. -1. Prefer local state and don't [lift state up](/learn/sharing-state-between-components) any further than necessary. Don't keep transient state like forms and whether an item is hovered at the top of your tree or in a global state library. -1. Keep your [rendering logic pure.](/learn/keeping-components-pure) If re-rendering a component causes a problem or produces some noticeable visual artifact, it's a bug in your component! Fix the bug instead of adding memoization. -1. Avoid [unnecessary Effects that update state.](/learn/you-might-not-need-an-effect) Most performance problems in React apps are caused by chains of updates originating from Effects that cause your components to render over and over. -1. Try to [remove unnecessary dependencies from your Effects.](/learn/removing-effect-dependencies) For example, instead of memoization, it's often simpler to move some object or a function inside an Effect or outside the component. +1. Saat komponen membungkus komponen lain secara visual, biarkan [accept JSX as children.](/learn/passing-props-to-a-component#passing-jsx-as-children) Kemudian, jika komponen pembungkus memperbarui statenya sendiri, React tahu bahwa komponen-komponen turunan tidak perlu dirender ulang. +1. Gunakanlah state lokal dan jangan [lift state up](/learn/sharing-state-between-components) lebih dari yang diperlukan. Jangan menyimpan state sementara seperti forms atau apakah suatu item dihover di bagian atas pohon komponen atau dalam pustaka state global. +1. jaga [logika render Anda murni.](/learn/keeping-components-pure) jika sebuah komponen render ulang menyebabkan masalah or menghasilkan beberapa visual artifact yang mencolok, itu adalah sebuah bug di dalam komponen Anda! Perbaiki bug alih-alih menambahkan memoisasi. +1. hindari [efek yang tidak perlu yang mengubah state](/learn/you-might-not-need-an-effect) +Kebanyakan masalah performa dalam aplikasi React disebabkan oleh rantai pembaruan yang berasal dari efek yang menyebabkan komponen Anda dirender berulang-ulang. +1. Coba untuk [menghapus dependensi yang tidak diperlukan dari Efek.](/learn/removing-effect-dependencies) Sebagai contoh, daripada memoisasi, seringkali lebih sederhana untuk memindahkan beberapa objek atau fungsi ke dalam Efek atau di luar komponen. -If a specific interaction still feels laggy, [use the React Developer Tools profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) to see which components benefit the most from memoization, and add memoization where needed. These principles make your components easier to debug and understand, so it's good to follow them in any case. In long term, we're researching [doing memoization automatically](https://www.youtube.com/watch?v=lGEMwh32soc) to solve this once and for all. +Jika suatu interaksi masih terasa lambat, [gunakan profiler React Developer Tools](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) untuk melihat komponen mana yang paling diuntungkan dari memoisasi, dan tambahkan memoisasi jika diperlukan. Prinsip-prinsip ini membuat komponen Anda lebih mudah untuk didebug dan dipahami, sehingga baik untuk diikuti dalam semua kasus. Secara jangka panjang, kami sedang meneliti [melakukan memoisasi secara otomatis](https://www.youtube.com/watch?v=lGEMwh32soc) untuk menyelesaikan masalah ini sekali dan untuk selamanya. -#### Skipping re-rendering with `useCallback` and `memo` {/*skipping-re-rendering-with-usecallback-and-memo*/} +#### Melewati pengulangan rendering dengan `useCallback` dan `memo` {/*skipping-re-rendering-with-usecallback-and-memo*/} -In this example, the `ShippingForm` component is **artificially slowed down** so that you can see what happens when a React component you're rendering is genuinely slow. Try incrementing the counter and toggling the theme. +Dalam contoh ini, komponen `ShippingForm` **diperlambat dengan sengaja** agar Anda bisa melihat apa yang terjadi ketika komponen React yang Anda render benar-benar lambat. Cobalah untuk menambahkan nilai counter dan mengubah tema. -Incrementing the counter feels slow because it forces the slowed down `ShippingForm` to re-render. That's expected because the counter has changed, and so you need to reflect the user's new choice on the screen. +Meningkatkan counter terasa lambat karena memaksa `ShippingForm` yang melambat untuk render ulang. Ini diharapkan karena counter berubah, sehingga Anda perlu memperbarui pilihan pengguna di layar. -Next, try toggling the theme. **Thanks to `useCallback` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** `ShippingForm` skipped re-rendering because the `handleSubmit` function has not changed. The `handleSubmit` function has not changed because both `productId` and `referrer` (your `useCallback` dependencies) haven't changed since last render. +Selanjutnya, coba ubah tema. **Berkat `useCallback` bersama dengan [`memo`](/reference/react/memo), meskipun ada penundaan buatan, itu tetap cepat!** `ShippingForm` menghindari render ulang karena fungsi `handleSubmit` tidak berubah. fungsi `handleSubmit` tidak berubah karena kedua `productId` dan `referrer` (dependensi `useCallback` Anda) tidak berubah sejak render terakhir. @@ -298,7 +299,7 @@ export default function ProductPage({ productId, referrer, theme }) { } function post(url, data) { - // Imagine this sends a request... + // Bayangkan ini mengirim permintaan... console.log('POST /' + url); console.log(data); } @@ -313,7 +314,7 @@ const ShippingForm = memo(function ShippingForm({ onSubmit }) { console.log('[ARTIFICIALLY SLOW] Rendering '); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Tidak melakukan apa-apa selama 500ms untuk mensimulasikan kode yang sangat lambat } function handleSubmit(e) { @@ -383,11 +384,11 @@ button[type="button"] { -#### Always re-rendering a component {/*always-re-rendering-a-component*/} +#### Selalu render ulang sebuah Komponen {/*always-re-rendering-a-component*/} -In this example, the `ShippingForm` implementation is also **artificially slowed down** so that you can see what happens when some React component you're rendering is genuinely slow. Try incrementing the counter and toggling the theme. +Dalam contoh ini, implementasi `ShippingForm` juga **disengaja diperlambat** agar Anda dapat melihat apa yang terjadi ketika suatu komponen React yang Anda render memang lambat. Cobalah untuk meningkatkan counter dan mengubah tema. -Unlike in the previous example, toggling the theme is also slow now! This is because **there is no `useCallback` call in this version,** so `handleSubmit` is always a new function, and the slowed down `ShippingForm` component can't skip re-rendering. +Berbeda dengan contoh sebelumnya, mengubah tema menjadi lambat juga pada contoh ini! Hal ini disebabkan karena **tidak ada pemanggilan `useCallback` pada versi ini,** sehingga `handleSubmit` selalu menjadi fungsi baru, dan komponen `ShippingForm` yang melambat tidak dapat melewatkan proses rendering. @@ -437,7 +438,7 @@ export default function ProductPage({ productId, referrer, theme }) { } function post(url, data) { - // Imagine this sends a request... + // Bayangkan ini mengirim permintaan... console.log('POST /' + url); console.log(data); } @@ -452,7 +453,7 @@ const ShippingForm = memo(function ShippingForm({ onSubmit }) { console.log('[ARTIFICIALLY SLOW] Rendering '); let startTime = performance.now(); while (performance.now() - startTime < 500) { - // Do nothing for 500 ms to emulate extremely slow code + // Tidak melakukan apa-apa selama 500ms untuk mensimulasikan kode yang sangat lambat } function handleSubmit(e) { @@ -467,7 +468,7 @@ const ShippingForm = memo(function ShippingForm({ onSubmit }) { return (
-

Note: ShippingForm is artificially slowed down!

+

Catatan: ShippingForm di buat lambat secara sengaja!