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

Menulis kod React yang bersih memerlukan pengurusan state yang bijak. Corak state yang buruk membawa kepada pepijat dan kod yang kompleks.

Elakkan empat kesilapan biasa ini:

  1. Kumpulkan data yang berkaitan

Jangan cipta hook state yang berasingan untuk nilai yang berubah bersama-sama.

Daripada:

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

Gunakan objek:

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

Ini memastikan kemas kini anda kekal bersih dan teratur.

  1. Elakkan state yang bercanggah

Apabila beberapa boolean menjejaki proses yang sama, anda akan mencipta pepijat.

Daripada mempunyai:

  • isSubmitting
  • isSubmit

Gunakan satu string status:

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

Hasilkan logik UI anda daripada satu sumber kebenaran (single source of truth) ini.

  1. Buang state yang berlebihan

Jika anda boleh mengira sesuatu nilai semasa render, jangan letakkannya di dalam state.

Jangan simpan:

  • firstName
  • lastName
  • fullName

Simpan nama pertama dan nama akhir sahaja. Kira nama penuh secara langsung:

  • const fullName = firstName + " " + lastName;

Selain itu, jangan sesekali simpan props dalam state. State hanya diinisialisasi sekali sahaja. Jika prop anda berubah, state tidak akan dikemas kini. Gunakan prop tersebut secara terus.

  1. Berhenti menduplikasi data

Jangan simpan data yang sama dalam dua state yang berbeza.

Jika anda mempunyai senarai tugasan dan satu tugasan yang dipilih, jangan simpan keseluruhan objek tugasan di kedua-dua tempat. Ini menyukarkan proses kemas kini.

Sebaliknya:

  • Simpan senarai tugasan.
  • Simpan selectedTaskId sahaja.
  • Cari tugasan daripada senarai menggunakan ID tersebut semasa render.

Ini memastikan tugasan yang dipilih sentiasa sepadan dengan data terkini dalam senarai anda.

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