Mengapakah UseEffect Hook Saya Berjalan Dua Kali dalam React 18 (dan Bagaimana Saya Boleh Membetulkannya)?

Mengapa useEffect Berjalan Dua Kali dan Cara Mengendalikannya dalam React

Masalah:

Apabila menggunakan useEffect untuk log perubahan keadaan pada lekapan, diperhatikan bahawa kesannya akan dicetuskan dua kali. Isu ini dihadapi dalam React 18.

Sebab:

Dalam mod pembangunan React 18 dengan StrictMode, useEffect sengaja dipasang semula sekali untuk memastikan komponen kritikal berdaya tahan kepada berbilang kitaran pemasangan dan nyahlekap. React bertujuan untuk mengekalkan keadaan semasa kitaran ini untuk prestasi yang lebih baik.

Penyelesaian:

Daripada bergantung pada larian awal useEffect, adalah disyorkan untuk menggunakan pergantungan kosong tatasusunan ([]) yang menjalankan kesan hanya selepas yang pertama render:

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("rendered", count);
  }, []);

  return <div>...</div>;
};

Penyelesaian Alternatif:

Jika kebergantungan pada keadaan adalah penting dan mesti disemak pada setiap render, pertimbangkan untuk menggunakan pendekatan berikut:

• Fungsi Pembersihan: Gunakan fungsi pembersihan yang dikembalikan oleh useEffect kepada melakukan kesan sampingan apabila komponen dinyahlekap. Ini memastikan pembersihan yang betul dan mengelakkan kebocoran memori.
• useRef: Cangkuk useRef boleh digunakan untuk menyimpan rujukan kepada data boleh ubah dan nilainya kekal antara pemaparan. Ini berguna untuk menjejaki perubahan keadaan tanpa mencetuskan berbilang panggilan useEffect.
• Caching dan Debouncing: Jika kesannya melibatkan membuat permintaan luaran, pertimbangkan untuk menggunakan teknik caching atau nyahlantun untuk mengelakkan panggilan pendua.

Pengeluaran Gelagat:

Adalah penting untuk ambil perhatian bahawa tingkah laku ini hanya berlaku dalam mod pembangunan. Dalam binaan pengeluaran, useEffect akan dijalankan sekali sahaja bagi setiap lekapan komponen.

Kesimpulan:

Memahami mengapa useEffect berjalan dua kali dalam React 18 adalah penting untuk menulis yang berkelakuan baik dan mantap Kod tindak balas. Dengan menggunakan penyelesaian yang sesuai yang dibincangkan di atas, pembangun boleh menghalang pepijat, mengekalkan ketekalan keadaan dan memastikan prestasi aplikasi yang cekap.

Atas ialah kandungan terperinci Mengapakah UseEffect Hook Saya Berjalan Dua Kali dalam React 18 (dan Bagaimana Saya Boleh Membetulkannya)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!