Skip to content

Commit 932a1f5

Browse files
authored
Translate FAQ Component State (#185)
1 parent c379a93 commit 932a1f5

File tree

1 file changed

+42
-41
lines changed

1 file changed

+42
-41
lines changed

Diff for: content/docs/faq-state.md

+42-41
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,107 @@
11
---
22
id: faq-state
3-
title: Component State
3+
title: State Komponen
44
permalink: docs/faq-state.html
55
layout: docs
66
category: FAQ
77
---
88

9-
### What does `setState` do? {#what-does-setstate-do}
9+
### Apa yang `setState` lakukan? {#what-does-setstate-do}
1010

11-
`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering.
11+
`setState()` merencanakan suatu pembaruan ke suatu `state` objek komponen. Ketika *state* berubah, komponen merespons dengan me-*render* ulang.
1212

13-
### What is the difference between `state` and `props`? {#what-is-the-difference-between-state-and-props}
13+
### Apa perbedaan antara `state` dan `props`? {#what-is-the-difference-between-state-and-props}
1414

15-
[`props`](/docs/components-and-props.html) (short for "properties") and [`state`](/docs/state-and-lifecycle.html) are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: `props` get passed *to* the component (similar to function parameters) whereas `state` is managed *within* the component (similar to variables declared within a function).
15+
[`props`](/docs/components-and-props.html) (kependekan dari "properti") dan [`state`](/docs/state-and-lifecycle.html) adalah objek JavaScript biasa. Meskipun keduanya menyimpan informasi yang mempengaruhi keluaran dari *render*, keduanya berbeda satu sama lain: `props` diteruskan *ke* komponen (mirip dengan *function parameters*) sedangkan `state` dikelola *dalam* komponen (mirip dengan variabel yang dideklarasikan dalam suatu *function*).
1616

17-
Here are some good resources for further reading on when to use `props` vs `state`:
17+
Berikut adalah beberapa sumber yang bagus untuk dibaca lebih lanjut tentang kapan menggunakan `props` vs. `state`:
1818
* [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
1919
* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
2020

21-
### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value}
21+
### Kenapa `setState` memberikan saya `value` yang salah? {#why-is-setstate-giving-me-the-wrong-value}
2222

23-
In React, both `this.props` and `this.state` represent the *rendered* values, i.e. what's currently on the screen.
23+
Di React, baik `this.props` dan `this.state` mewakili nilai yang telah di-*render*, yaitu apa yang saat ini ada di layar.
2424

25-
Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need to compute values based on the current state (see below for details).
25+
Pemanggilan `setState` bersifat *asynchronous* - jangan mengandalkan `this.state` untuk mencerminkan nilai baru segera setelah memanggil `setState`. Mengoper pembaruan *function* sebagai ganti *object* jika anda perlu menghitung nilai berdasarkan *state* saat ini (lihat di bawah untuk lebih lanjut).
2626

27-
Example of code that will *not* behave as expected:
27+
Contoh kode yang *tidak* akan berperilaku seperti yang diharapkan:
2828

2929
```jsx
3030
incrementCount() {
31-
// Note: this will *not* work as intended.
31+
// Catatan: ini mungkin *tidak* akan bekerja sebagaimana mestinya.
3232
this.setState({count: this.state.count + 1});
3333
}
3434

3535
handleSomething() {
36-
// Let's say `this.state.count` starts at 0.
36+
// Anggap saja `this.state.count` dimulai dari 0.
3737
this.incrementCount();
3838
this.incrementCount();
3939
this.incrementCount();
40-
// When React re-renders the component, `this.state.count` will be 1, but you expected 3.
40+
// Ketika React me-render ulang komponennya, `this.state.count` akan menjadi 1, tapi anda mengharapkannya menjadi 3.
4141

42-
// This is because `incrementCount()` function above reads from `this.state.count`,
43-
// but React doesn't update `this.state.count` until the component is re-rendered.
44-
// So `incrementCount()` ends up reading `this.state.count` as 0 every time, and sets it to 1.
42+
// Ini karena fungsi `incrementCount()` di atas membacanya dari `this.state.count`,
43+
// tapi React tidak memperbarui `this.state.count` sampai komponennya me-render ulang.
44+
// Jadi `incrementCount()` akhirnya membaca `this.state.count` sebagai 0 setiap waktu, dan mengubahnya ke 1.
4545

46-
// The fix is described below!
46+
// Perbaikan dari masalah ini dijelaskan di bawah!
4747
}
4848
```
4949

50-
See below for how to fix this problem.
50+
Lihat di bawah untuk mengetahui cara memperbaiki masalah ini.
5151

52-
### How do I update state with values that depend on the current state? {#how-do-i-update-state-with-values-that-depend-on-the-current-state}
52+
### Bagaimana cara saya memperbarui `state` dengan `value` yang bergantung pada `state` saat ini?{#how-do-i-update-state-with-values-that-depend-on-the-current-state}
5353

54-
Pass a function instead of an object to `setState` to ensure the call always uses the most updated version of state (see below).
54+
Oper sebuah *function* bukan *object* ke dalam `setState` untuk memastikan pemanggilannya selalu menggunakan versi terbaru dari *state* (lihat di bawah).
5555

56-
### What is the difference between passing an object or a function in `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
56+
### Apa perbedaan antara mengoper sebuah `object` atau `function` dalam `setState`? {#what-is-the-difference-between-passing-an-object-or-a-function-in-setstate}
5757

58-
Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting:
58+
Mengoper pembaruan *function* memungkinkan anda untuk mengakses nilai *state* saat ini dalam pembaruan. Karena pemanggilan `setState` dikelompokkan, ini memungkinkan anda merangkai pembaruan dan memastikannya terjadi secara bertumpukan bukan bertentangan:
5959

6060
```jsx
6161
incrementCount() {
6262
this.setState((state) => {
63-
// Important: read `state` instead of `this.state` when updating.
63+
// Penting: membaca `state` bukan `this.state` ketika memperbarui.
6464
return {count: state.count + 1}
6565
});
6666
}
6767

6868
handleSomething() {
69-
// Let's say `this.state.count` starts at 0.
69+
// Anggap saja `this.state.count` dimulai dari 0.
7070
this.incrementCount();
7171
this.incrementCount();
7272
this.incrementCount();
7373

74-
// If you read `this.state.count` now, it would still be 0.
75-
// But when React re-renders the component, it will be 3.
74+
// Jika anda membaca `this.state.count` sekarang, itu pasti tetap 0.
75+
// Tapi ketika React me-render ulang komponennya, hasilnya akan menjadi 3.
7676
}
7777
```
7878

79-
[Learn more about setState](/docs/react-component.html#setstate)
79+
[Pelajari lebih lanjut tentang `setState`](/docs/react-component.html#setstate)
8080

81-
### When is `setState` asynchronous? {#when-is-setstate-asynchronous}
81+
### Kapan `setState` *asynchronous*? {#when-is-setstate-asynchronous}
8282

83-
Currently, `setState` is asynchronous inside event handlers.
83+
Saat ini, `setState` *asynchronous* di dalam *event handler*.
8484

85-
This ensures, for example, that if both `Parent` and `Child` call `setState` during a click event, `Child` isn't re-rendered twice. Instead, React "flushes" the state updates at the end of the browser event. This results in significant performance improvements in larger apps.
85+
Ini memastikan, sebagai contoh, jika kedua `Parent` dan `Child` memanggil `setState` selagi *click event*, `Child` tidak perlu me-*render* ulang dua kali. Bahkan sebaliknya, React "membilas" pembaruan *state* pada akhir *browser event*. Ini menghasilkan peningkatan kinerja yang signifikan pada aplikasi-aplikasi yang lebih besar.
8686

87-
This is an implementation detail so avoid relying on it directly. In the future versions, React will batch updates by default in more cases.
87+
Ini adalah implementasi secara rinci untuk menghindari mengandalkannya secara langsung. Di versi yang mendatang, React akan melakukan sejumlah pembaruan secara *default* dalam kasus-kasus yang lebih banyak.
8888

89-
### Why doesn't React update `this.state` synchronously? {#why-doesnt-react-update-thisstate-synchronously}
89+
### Kenapa React tidak memperbarui `this.state` secara *synchronous*? {#why-doesnt-react-update-thisstate-synchronously}
9090

91-
As explained in the previous section, React intentionally "waits" until all components call `setState()` in their event handlers before starting to re-render. This boosts performance by avoiding unnecessary re-renders.
91+
Seperti yang sudah dijelaskan di bagian sebelumnya, React dengan sengaja "menunggu" sampai semua komponen memanggil `setState()` di *event handlers* sebelum me-*render* ulang. Ini meningkatkan kinerja dengan menghindari *render* ulang yang tidak perlu.
9292

93-
However, you might still be wondering why React doesn't just update `this.state` immediately without re-rendering.
93+
Namun, anda mungkin masih bertanya-tanya kenapa React tidak langsung memperbarui `this.state` tanpa proses *render* ulang.
9494

95-
There are two main reasons:
95+
Ada dua alasan utama:
9696

97-
* This would break the consistency between `props` and `state`, causing issues that are very hard to debug.
98-
* This would make some of the new features we're working on impossible to implement.
97+
* Ini akan merusak konsistensi antara `props` dan `state`, menyebabkan masalah yang sangat sulit untuk di-*debug*.
98+
* Ini akan membuat beberapa fitur baru yang sedang kami kerjakan menjadi mustahil untuk diimplementasikan.
9999

100-
This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecomment-360199710) dives deep into the specific examples.
101100

102-
### Should I use a state management library like Redux or MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
101+
[Komentar GitHub](https://github.com/facebook/react/issues/11527#issuecomment-360199710) ini mendalami lebih jauh ke contoh-contoh yang lebih spesifik.
103102

104-
[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux)
103+
### Haruskah saya menggunakan `state` *management library* seperti Redux atau MobX? {#should-i-use-a-state-management-library-like-redux-or-mobx}
105104

106-
It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React.
105+
[Mungkin.](https://redux.js.org/faq/general#when-should-i-use-redux)
106+
107+
Ide yang bagus untuk mengenal React terlebih dahulu, sebelum menambahkan *library* tambahan. Anda dapat membuat aplikasi yang sangat kompleks hanya dengan menggunakan React.

0 commit comments

Comments
 (0)