𝗥𝗲𝗮𝗰𝘁 𝗝𝘀 𝗨𝘀𝗲𝗦𝘁𝗮𝘁𝗲 𝗔𝗻𝘁𝗶𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀

Menulis kode React yang bersih memerlukan manajemen state yang cerdas. Pola state yang buruk menyebabkan bug dan kode yang kompleks.

Hindari empat kesalahan umum berikut:

  1. Kelompokkan data yang terkait

Jangan membuat hook state terpisah untuk nilai-nilai yang berubah secara bersamaan.

Daripada:

  • const [x, setX] = useState(0);
  • const [y, setY] = useState(0);

Gunakan sebuah objek:

  • const [position, setPosition] = useState({ x: 0, y: 0 });

Ini menjaga pembaruan Anda tetap bersih dan terorganisir.

  1. Hindari state yang bertentangan

Ketika beberapa boolean melacak proses yang sama, Anda menciptakan bug.

Daripada memiliki:

  • isSubmitting
  • isSubmit

Gunakan satu string status:

  • status: 'TYPING'
  • status: 'SUBMITTING'
  • status: 'SUBMITTED'

Turunkan logika UI Anda dari satu sumber kebenaran (single source of truth) ini.

  1. Hapus state yang redundan

Jika Anda dapat menghitung suatu nilai selama render, jangan masukkan nilai tersebut ke dalam state.

Jangan simpan:

  • firstName
  • lastName
  • fullName

Simpan saja nama depan dan nama belakang. Hitung nama lengkap secara langsung:

  • const fullName = firstName + " " + lastName;

Selain itu, jangan pernah menyimpan props di dalam state. State hanya diinisialisasi satu kali. Jika prop Anda berubah, state tidak akan diperbarui. Gunakan prop tersebut secara langsung.

  1. Berhenti menduplikasi data

Jangan menyimpan data yang sama di dua state yang berbeda.

Jika Anda memiliki daftar tugas dan satu tugas yang dipilih, jangan simpan seluruh objek tugas di kedua tempat tersebut. Hal ini membuat pembaruan menjadi sulit.

Sebagai gantinya:

  • Simpan daftar tugas.
  • Simpan hanya selectedTaskId.
  • Temukan tugas dari daftar menggunakan ID tersebut selama render.

Ini memastikan tugas yang dipilih selalu sesuai dengan data terbaru dalam daftar Anda.

Sumber: https://dev.to/kkr0423/reactjs-usestate-antipatterns-58i9