Review komponen ReactPelatihan Pemrograman

Review komponen React: state, hook, dan re-render

Penyerahan hasil mulai 1 hariTermasuk revisiPemeriksaan kualitas
Perlindungan pembayaranSelengkapnya
  • Revisi dalam batas paket tidak dikenai biaya.
  • Jika Anda tidak merespons dalam 3 hari setelah penyerahan hasil, hasil kerja diterima secara otomatis.
Pesan · Rp 595.000

Uang ditahan saat Anda membayar dan diteruskan hanya setelah Anda menerima hasil kerja.

Review komponen React: state, hook, dan re-render

Contoh hasil

Contoh untuk paket Standar

Code review: skrip Python impor pesanan untuk toko online kecil

Apa yang dilakukan kode

  1. Membaca orders.csv dari ekspor toko.
  2. Untuk tiap baris pesanan, mencari produk berdasarkan SKU di stock.xlsx lalu mengurangi jumlahnya.
  3. Menulis stok yang diperbarui dan mencatat total ke import_log.txt.

Strukturnya jelas dan nama fungsinya baik. Sebagian besar masalah muncul karena input tidak sesuai dengan yang diharapkan skrip.

Bug dan titik lemah

#BarisTingkatMasalah
148TinggiCSV yang sama bisa diimpor dua kali; tidak ada pengecekan ID pesanan yang sudah diproses. Ini penyebab paling mungkin stok minus.
272Tinggiint(row["qty"]) crash pada nilai kosong atau "2.0" dari pesanan refund.
395SedangPencarian SKU peka huruf besar-kecil: "gt-101" dan "GT-101" dianggap produk berbeda.
4130SedangFile dibuka tanpa encoding="utf-8", sehingga nama produk dengan karakter khusus rusak di Windows.
5201Rendahexcept: kosong menyembunyikan error asli dan membuat log tidak berguna.

Potongan kode yang diperbaiki

Masalah 1: lewati pesanan yang sudah diimpor

processed = load_processed_ids("processed_orders.txt")
for row in reader:
    if row["order_id"] in processed:
        continue
    # ... logika yang sudah ada ...
    processed.add(row["order_id"])
save_processed_ids("processed_orders.txt", processed)

Alasan: setiap pesanan hanya diterapkan sekali, meski skrip dijalankan ulang pada file yang sama.

Masalah 2: baca jumlah dengan aman

raw = (row.get("qty") or "").strip()
try:
    qty = int(float(raw))
except ValueError:
    log.warning("Pesanan %s: jumlah tidak valid %r, dilewati", row["order_id"], raw)
    continue

Alasan: baris refund atau sebagian dilewati dengan catatan jelas, bukan menghentikan seluruh impor.

Masalah 3: seragamkan SKU

sku = row["sku"].strip().upper()

Terapkan .strip().upper() yang sama saat membangun kamus stok.

Gaya dan keterbacaan

  • process() panjangnya 90 baris; pecah menjadi read_orders, apply_to_stock, write_report.
  • Ganti nomor kolom "ajaib" (row[7]) dengan nama header.

Silakan uji setiap perbaikan pada salinan file Anda: kami membaca kodenya, tetapi tidak menjalankannya.

Klien: pemilik toko teh online yang menulis skrip Python 310 baris untuk mengimpor pesanan dari ekspor CSV ke spreadsheet stok Masalah yang dilaporkan: "Kadang stok jadi minus, dan skripnya crash di beberapa file."

Klien dan semua datanya fiktif.

Tentang layanan ini

Sebagian besar bug React berasal dari beberapa tempat: useEffect dengan daftar dependensi yang salah, state yang disalin dari props, key yang hilang di dalam list, atau nilai usang yang tertangkap di closure. Kami memeriksa komponen Anda, menjelaskan kapan setiap komponen dirender dan mengapa, serta menunjukkan hook dan state yang menyebabkan loop, kedipan, atau re-render berlebih. Anda menerima kode komponen yang diperbaiki dengan penjelasan sederhana untuk setiap perubahan.

Yang termasuk

  • Yang Anda dapatkanReview tertulis di halaman pesanan: bagaimana komponen Anda dirender, daftar masalah hook dan state berdasarkan tingkat kepentingan, dan potongan komponen yang diperbaiki. Paket Premium menambahkan saran tentang cara memecah komponen dan di mana state sebaiknya disimpan.
  • useEffect diperiksaDependensi, cleanup, loop
  • Penempatan stateDerived state dan lifting state up
  • Re-renderMengapa komponen dirender ulang
  • List dan keyKey yang stabil dan pembaruan list
  • Komponen yang diperbaikiDengan alasan untuk setiap perubahan

Cara kerja

  1. 1
    BriefAnda menempelkan komponen dan peringatan
  2. 2
    MembacaKami menelusuri props, state, dan effect
  3. 3
    TinjauanAnda menerima daftar masalah dan kode yang diperbaiki

Yang kami butuhkan dari Anda

Komponen yang ditempel sebagai teks atau tangkapan layar, versi React dan framework-nya, apa yang seharusnya dilakukan layar, serta peringatan atau error yang Anda lihat.

Kami akan menanyakan:

  • Versi React dan framework apa?
  • Di mana Anda menyimpan state?
  • Apa yang salah di layar?
  • Apakah Anda menggunakan TypeScript?

Bandingkan paket

DasarKomponen hingga 100 barisRp 255.000StandarKomponen hingga 400 barisRp 595.000PremiumHingga 1.000 baris dengan saran strukturRp 1.173.000
Tenggat1 hari2 hari3 hari
Revisi123
Baris kodehingga 100hingga 400hingga 1.000
Potongan kode yang diperbaikiYaYaYa
Saran strukturTidakTidakYa
PesanPesanPesan

Perlindungan pembayaran

Anda membayar saat memesan, tetapi uangnya diteruskan hanya untuk hasil kerja yang diterima.

  • Harga pastiHarga paket tidak berubah setelah Anda membayar.
  • Uang ditahanSaat Anda membayar, jumlahnya hanya ditahan. Dana diteruskan ke Dleex setelah Anda menerima hasil kerja.
  • Diperiksa sebelum penyerahanSetiap hasil melewati pemeriksaan kualitas sebelum sampai kepada Anda, dan Anda dapat melihatnya di halaman pesanan sebelum menerimanya.
  • Revisi gratisMinta revisi sesuai brief Anda sebanyak yang diizinkan paket.
  • Diterima setelah 3 hariJika dalam 3 hari setelah penyerahan hasil Anda tidak menerima hasil kerja maupun meminta revisi, hasil kerja diterima secara otomatis. Jika Anda menulis di chat pesanan setelah penyerahan hasil, pesanan akan menunggu; setelah kami menjawab, kami dapat memulai ulang hitungan 3 hari dan akan memberitahukannya di chat.
  • Dikerjakan ulang atau pengembalian dana penuhJika hasilnya tidak sesuai brief Anda dan revisi tidak memperbaikinya, atau pengerjaan memakan waktu lebih dari dua kali tenggatnya, tulis di chat pesanan: kami akan mengerjakan ulang atau mengembalikan pembayaran secara penuh.
Cara kerjanya →

Tanya jawab

Apakah Anda menjalankan kode saya?

Tidak. Kami membacanya dengan cermat dan menganalisis perilakunya, tetapi tidak menjalankannya, jadi uji setiap perbaikan yang disarankan di proyek Anda sendiri.

Haruskah saya membungkus semuanya dengan useMemo dan useCallback?

Biasanya tidak. Kami menunjukkan di mana memoisasi membantu dan di mana hanya menambah kerumitan, berdasarkan cara komponen Anda benar-benar dirender.

Apakah Anda meninjau server component Next.js?

Ya. Beri tahu kami file mana yang merupakan server component dan mana yang client component, lalu kami memeriksa apa yang berjalan di mana.

Pesan · Rp 595.000· 2 hari