واکنش نشان دادن کامپوننت دو بار

سلام فن ها

اگر از React استفاده می کنید، قطعاً از آن استفاده می کنید useEffect قلاب درسته؟

اگر به شما بگویم که React رندر دو بار و این یک باگ ساده است چه؟
بله درست است، این یک اشکال بسیار کوچک است، اما در عین حال نادیده گرفته شده است، اگرچه فقط در سیستم محلی ما است و نه در ساخت تولید واقعی.
اما یک دقیقه صبر کنید، حتی اگر فقط در حالت توسعه دهنده باشد. ما استفاده می کنیم vite یا دیگر

ابزارهایی برای اجرای برنامه و منعکس کردن تغییرات به صورت زنده. همچنین، بسیاری از ما آن را روشن کرده‌ایم ذخیره خودکار گزینه ای به عنوان گیلاس در بالا.

وقتی از آن استفاده می کنیم، این یک چالش گیج کننده می شود useEffect برای ساختن
تماس های API از آنجایی که برخی از API های رایگان دارای محدودیت 100 تماس در روز هستند، بنابراین توصیه می کنم برای ایمن ماندن، ذخیره خودکار را در IDE خود خاموش کنید.

حالا پس از این داستان کوچک، چه راه حلی ممکن است بپرسید؟
من یک راه حل بسیار ساده و در عین حال موثر برای بله دارم. خیلی عالی است اگر دنبال کنید. بیایید ببینیم چگونه با این قلدر مقابله کنیم.

ابتدا می خواهیم چند متغیر محیطی داشته باشیم. بله، این می تواند مفید باشد، شما می توانید نام آن را انتخاب کنید environment یا mode. در اینجا اجازه دهید با environment

در env.local خود می توانید آن را مانند داشته باشید

VITE_Environent="DEV"
# if using vite
REACT_APP_Environent="DEV"
# If using create-react-app

یک فایل برای ذخیره متغیرهای محیطی مانند این داشته باشید

env.config.ts

const RAPIDAPI_KEY: string = import.meta.env.VITE_RAPIDAPI_KEY;
const RAPIDAPI_HOST: string = import.meta.env.VITE_RapidAPI_Host;
const ENVIRONMENT: string = import.meta.env.VITE_Environent;
const ENVS = {
 RAPIDAPI_KEY: RAPIDAPI_KEY,
 RAPIDAPI_HOST: RAPIDAPI_HOST,
 ENVIRONMENT: ENVIRONMENT, 
};

export default ENVS;

من آن را به همین صورت صادر می کنم، برای جلوگیری از اشتباهات املایی، زیرا فقط با لاگ های کنسول می توانید آنها را شناسایی کنید، بنابراین بهتر است این کار را یک بار اینجا انجام دهید و آنها را در جای دیگری وارد و استفاده کنید. همچنین، به قرارداد نامگذاری نگاه کنید و آن را جایگزین کنید VITE_ با REACT_APP_ برای یک تجربه روان

اکنون، بخش شادابی است که شما این وبلاگ را برای آن خوانده اید
روش مناسب برای انجام آن

main.tsx

import React, { memo } from "react";
import ReactDOM from "react-dom/client";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import App from "./App.tsx";
import "./index.css";
import { Provider } from "react-redux";
import { store } from "./state/store.ts";
import ProductsPage from "./pages/ProductsPage.tsx";
import NotFound from "./pages/NotFound.tsx";
import ENVS from "./env.config.ts";
const renderApp =() => (
 <Provider store={store}>
 <Router>
 <Routes>
 <Route path="https://dev.to/" element={<App />}>
 <Route path="products" element={<ProductsPage />} />
 Route>
 <Route path="*" element={<NotFound />} />
 Routes>
 Router>
 Provider>
)

console.log("ENVS.ENVIRONMENT", ENVS.ENVIRONMENT)
// Conditionally wrap in React.StrictMode based on the environment
// As it is the one causing this issue
// React.StrictMode 
const app =
 ENVS.ENVIRONMENT !== "DEV" ? (
 <React.StrictMode>{renderApp()}React.StrictMode>
 ) : (
 renderApp()
 );

ReactDOM.createRoot(document.getElementById("root")!).render(app);

در اینجا ما فقط یک تغییر کوچک ساده داریم.
ما یک تابع فلش ساختیم renderApp که ساده است JSX.element
و به صورت مشروط آن را داخل اگر محیط زیست نیست DEV . این کار را انجام می دهد و ما بهترین های هر دو دنیا را می گیریم.

همچنین اگر هر لحظه احساس کردید به آن نیاز دارید React.StrictMode ، تو می توانی
این کار را به راحتی با قرار دادن آن انجام دهید renderApp() در React.StrictMode .

من می دانم که این قطعا کمک خواهد کرد. به کدنویسی ادامه دهید.