بهینه‌ سازی درخواست‌های سرور با استفاده از React Hooks

Hook‌ها در React، توابعی هستند که امکان استفاده از state و سایر قابلیت‌های React را در کامپوننت‌های تابعی فراهم می‌کنند. با کمک Hookها، دیگر نیازی به جابجایی بین HOCها (Higher-Order Components)، کلاس‌ها و توابع نیست. این قابلیت باعث می‌شود که کدها، ساده‌تر و تمیزتر شده و تجربه کدنویسی بهتری برای توسعه‌دهندگان ایجاد شود.

حالا شاید از خودتان بپرسید: چرا React Hookها باید برای مدیریت درخواست‌های سرور استفاده شوند؟ واقعیت این‌است که درخواست‌های سرور تاثیر زیادی بر عملکرد و تجربه کاربری دارد. زمانی که درخواست‌ها به‌طور صحیح مدیریت نشوند، سرعت بارگذاری سایت کاهش پیدا کرده و در نتیجه کاربران دچار مشکل می‌شوند. به‌همین دلیل استفاده از روشی مانند React Hook برای مدیریت درخواست‌ها مناسب است.

در این مقاله، نشان می‌دهیم چگونه می‌توانید با React Hook، درخواست‌های سرور را به‌صورت بهینه مدیریت کنید. این روش نه تنها سرعت اجرای اپلیکیشن شما را بالا می‌برد، بلکه باعث می‌شود کاربران سایت و اپلیکیشن شما، بهترین تجربه کاربری را داشته باشند، پس در ادامه با ما همراه باشید.

آنچه در این مقاله می‌خوانید:

• پیش‌نیازها
• راه‌اندازی یک پروژه جدید React
• کامپوننت‌ها را با هوک UseEffect همگام سازی کنید
• درخواست‌های سرور را با هوک useMemo بهینه کنید
• مدیریت وضعیت درخواست‌های سرور با هوک useReducer
• جمع‌بندی
• سوالات متداول

پیش‌نیازها

برای اینکه بتوانید به‌درستی مراحل این آموزش را دنبال کنید، بهتر است با چند مورد از قبل آشنا باشید:

• درک خوبی از JavaScript و راه‌اندازی پروژه‌های React داشته باشید.
• با مفاهیم پایه‌ای React Hooks مانند useEffect، useMemo و useReducer حتما آشنا باشید.
• با نحوه ارسال درخواست به سرور در جاوا اسکریپت آشنا باشید.
• یک محیط توسعه آماده روی سرور مجازی خود داشته باشید.
• از یک ویرایشگر کد مانند VS Code استفاده کنید.
• برای تکمیل این آموزش، باید یک سرور مجازی Ubuntu با یک کاربر غیر روت (non-root) دارای دسترسی sudo و یک فایروال (Firewall) فعال داشته باشید. اگر هنوز این پیش‌نیازها را آماده نکرده‌اید، می‌توانید راهنمای راه‌اندازی اولیه سرور مجازی با اوبونتو را دنبال کنید.

همچنین اگر تجربه کار با APIها و آشنایی با اصول RESTful را هم داشته باشید، روند کار برای شما ساده‌تر خواهد شد. اگر در بهینه‌سازی درخواست‌های سرور تازه‌وارد هستید، نگران نباشید این آموزش طوری نوشته شده که برای همه سطوح از مبتدی تا پیشرفته قابل استفاده باشد:)

راه‌اندازی یک پروژه جدید React

راه‌اندازی پروژه React از ابتدا کمی گیج‌کننده است، اما ابزار Create React App (CRA) این مسیر را کاملا ساده کرده است. CRA یک ابزار خط فرمان بسیار پرکاربرد می‌باشد که فرایند ساخت و راه‌اندازی پروژه را به‌صورت خودکار انجام می‌دهد، و یک محیط توسعه آماده برای ساخت اپلیکیشن‌های React در اختیار شما می‌گذارد. در ادامه، نحوه ایجاد پروژه React را بررسی کنیم.

اگر به‌دنبال مطلب آموزشی برای هاست رایگان React هستید، مقاله زیر را پیشنهاد می‌کنیم.
معرفی هاست رایگان React

نصب Node.js و npm

برای راه‌اندازی پروژه React ابتدا باید Node.js و npm را روی سرورتان نصب کنید. قبل از هر چیزی، مطمئن شوید که Node.js و npm (مدیر بسته‌های Node) روی سیستم شما نصب شده باشند. برای بررسی اینکه نصب شده یا نه، از دستورات زیر استفاده کنید:

node -v
npm -v

اگر این دستورات نسخه‌های مربوطه را نشان دادند، یعنی نصب هستند. اگر نه، می‌توانید به وب‌سایت رسمی Node.js بروید و نسخه‌ای که می‌خواهید را دانلود و نصب کنید.

بعد از نصب، وارد دایرکتوری‌ای شوید که قصد دارید پروژه در آن ساخته شود.

سپس با اجرای دستور زیر، پروژه جدید React خود را بسازید:

npx create-react-app my-app

به‌جای my-app می‌توانید نام دلخواه پروژه‌تان را قرار دهید. CRA به‌صورت خودکار وابستگی‌ها را نصب می‌کند و یک ساختار اولیه پروژه React را ایجاد می‌کند که آماده توسعه است.

پس از اجرای دستور فوق اگر همه چیز درست پیش‌رفته باشد، خروجی مشابه زیر دریافت خواهید کرد:

...
Success! Created digital-ocean-tutorial at your_file_path/digital-ocean-tutorial
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd digital-ocean-tutorial
npm start

Happy hacking!

دستور بالا یک دایرکتوری جدید با نام پروژه ایجاد کرد و تمام فایل‌ها و ساختار اولیه‌ی مورد نیاز برای پروژه React را در آن قرار داده است.

پس از آن‌که فرایند نصب تمام شد، با دستور زیر وارد دایرکتوری پروژه شوید:

cd my-app

سپس، سرور توسعه را با دستور زیر اجرا کنید:

npm start

با اجرای این دستور، یک سرور محلی روی پورت 3000 راه‌اندازی شده و مرورگر به‌صورت خودکار صفحه‌ی اپلیکیشن شما را باز می‌کند. به این صورت که سرور بدون مشکل بالا آمده و خروجی مانند زیر خواهید دید:

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.x.x:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

اکنون باید بتوانید پیام Welcome to React را ببینید.

اگر این پیام را دیدید یعنی همه موارد به درستی نصب و راه‌اندازی شده و پروژه شما آماده است. از اینجا به بعد می‌توانید کامپوننت‌ها را بسازید، استایل‌ها را اضافه کنید و قدم به قدم اپلیکیشنی که مدنظرتان است را توسعه دهید.

با ابزار CRA، شما می‌توانید تمرکزتان را روی نوشتن کد بگذارید و نگران پیکربندی محیط توسعه نباشید.

حالا که پروژه React شما راه‌اندازی شده و در حال اجرا است، وقت آن است که روش‌های مختلفی را برای بهینه‌سازی درخواست‌های سرور با استفاده از React Hook بررسی کنیم.

آموزش کامل راه‌اندازی برنامه React با NGINX در Docker را در مقاله زیر مطالعه کنید.
 راه‌اندازی برنامه React با NGINX

کامپوننت‌ها را با هوک UseEffect همگام سازی کنید

هوک useEffect در React به شما اجازه می‌دهد که یک کامپوننت را با سیستم‌های خارجی مانند سرور همگام‌سازی کنید و تاثیرات جانبی مانند دریافت داده‌ها را به ‌طور کامل و قابل‌فهم مدیریت کنید. یکی از کاربردهای رایج هوک، انجام درخواست‌های سرور و به‌روزرسانی وضعیت کامپوننت‌ها می‌باشد.

برای این کار، یک تابع را داخل useEffect می‌نویسید که از fetch یا axios برای گرفتن داده استفاده می‌کند و بعد با setState، داده را در کامپوننت ذخیره می‌کنید.

بیایید یک مثال بزنیم، قرار است از یک API ساده (JSON Placeholder) داده بگیریم. برای اینکار به فایل app.js درون فولدر src پروژه‌تان بروید، کد پیش‌فرض را پاک کنید و با کد زیر جایگزین کنید:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, []);

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h2>- {item.title}</h2>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
}

export default MyComponent

در این مثال، هوک useEffect با یک آرایه‌ی خالی به‌عنوان وابستگی اجرا شده است، بنابراین فقط هنگام اولین رندر، کامپوننت فعال می‌شود.
state اولیه‌ی کامپوننت با یک آرایه‌ی خالی مقداردهی شده و تابعی به نام fetchData درون useEffect فراخوانی می‌شود. این تابع وظیفه دارد داده‌ها را از سرور دریافت کرده و پس از دریافت، با استفاده از setState، وضعیت کامپوننت را به‌روزرسانی کند.
در صورت رفرش کردن صفحه یا اپلیکیشن، خروجی مربوط به این درخواست در مرورگر قابل مشاهده خواهد بود.

یکی از نکته‌های مهم هنگام استفاده از useEffect این است که رندرهای غیرضروری می‌توانند باعث افت عملکرد اپلیکیشن شوند. به همین خاطر بهتر است دفعات اجرای useEffect را به حداقل برسانید. یکی از راه‌های مرسوم برای این‌کار، استفاده‌ی دقیق از آرایه‌ی وابستگی است. یعنی فقط آن propها و stateهایی را وارد این آرایه کنید که واقعا داخل هوک استفاده شدند.

همچنین، مدیریت درست خطاها موقع ارسال درخواست به سرور موضوعی است که نباید نادیده بگیریم. چون اگر خطایی رخ بدهد و هندل نشود، ممکن است کل کامپوننت دچار مشکل شود. برای جلوگیری از این وضعیت، می‌توانید داخل تابع fetchData از ساختار try-catch استفاده کنید، و در صورت بروز خطا، با کمک یک state مثل setError پیغام مناسبی به کاربر نشان دهید.

با رعایت این اصول می‌توانید با اطمینان بیشتری در کامپوننت‌های React، درخواست‌های سمت سرور را مدیریت کنید و در نهایت، تجربه‌ی کاربری بهتری را رقم بزنید.

اگر به‌دنبال آشنایی با نحوه کار با hookها در React هستید، می‌توانید مقاله زیر را مطالعه کنید.
نحوه کار با hookها در React

درخواست‌های سرور را با هوک useMemo بهینه کنید

هوک useMemo در React یکی از ابزارهای مهم برای بهینه‌سازی درخواست‌های سرور محسوب می‌شود، که شما از این طریق می‌توانید نتیجه‌ی یک محاسبه سنگین یا تکراری را ذخیره کنید، تا نیازی به اجرای مجدد آن محاسبه در هر رندر نباشد.

این ویژگی زمانی کاربرد دارد که با درخواست‌های سمت سرور سروکار دارید و می‌خواهید از رندرهای غیرضروری جلوگیری کنید تا عملکرد کلی کامپوننت بهبود پیدا کند.

یکی از کاربردهای رایج useMemo در این سناریو، ذخیره‌سازی نتایج دریافتی از سرور است. به‌این صورت که داده‌های دریافتی را با useMemo پردازش و نگهداری کرده، سپس ‌آن‌ها را به state کامپوننت منتقل می‌کنید. برای این کار، useMemo را داخل useEffect فراخوانی می‌کنید و داده‌ی سرور را به‌عنوان آرگومان اول، و یک آرایه‌ی وابستگی شامل propها یا stateهایی که روی نتیجه‌ی نهایی تأثیر می‌گذارند را به‌عنوان آرگومان دوم به آن می‌دهید.

برای پیاده‌سازی این روش و تست آن، داده‌هایی را از یک API تستی مانند JSONPlaceholder دریافت کنید و با استفاده از useMemo آن‌ها را در state نگهداری کنید.

برای اینکار فقط کافی‌ست کد فایل App.js را با کد زیر جایگزین کنید:

import { useEffect, useState, useMemo } from 'react';

function MyComponent({ postId }) {
  const [data, setData] = useState({});
  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
      const data = await response.json();
      setData(data);
    }
    fetchData();
  }, [postId]);

  const title = useMemo(() => data.title, [data]);

  return (
    <div>
      <h2>{title}</h2>
    </div>
  );
}

export default MyComponent

در مثال بالا، هوک useEffect با آرایه وابستگی postId فراخوانی می‌شود، یعنی هر بار که prop postId تغییر کند، این هوک اجرا خواهد شد. وضعیت کامپوننت با یک شیء خالی مقداردهی می‌شود و سپس تابع fetchData داخل useEffect فراخوانی می‌شود تا درخواست سرور را انجام دهد و وضعیت را با داده‌های دریافتی به‌روزرسانی کند. داخل کامپوننت، از هوک useMemo برای ذخیره‌سازی عنوان استفاده می‌کنیم، به این صورت که data.title را به‌عنوان آرگومان اول و [data] را به‌عنوان آرگومان دوم به آن می‌دهیم تا هر بار که data تغییر کند، عنوان نیز به‌روزرسانی شود.

در تصویر زیر نتیجه‌ی درخواست کد نمونه‌ی بالا آورده شده است:

توجه داشته باشید که استفاده از useMemo همیشه ضروری نیست و تنها زمانی باید از آن استفاده کنید که کامپوننت به برخی از props یا stateهایی وابسته باشد که ممکن است به‌طور مکرر تغییر کنند و محاسبات آن‌ها پرهزینه باشد. استفاده نادرست از useMemo می‌تواند منجر به سرریز حافظه و مشکلات دیگر در عملکرد اپلیکیشن شود.

آموزش کامل نصب برنامه React با استفاده از Nginx بر روی سرور مجازی Ubuntu را در مقاله زیر بخوانید.
نصب React با Nginx

مدیریت وضعیت درخواست‌های سرور با هوک useReducer

هوک useReducer در React شبیه useState است، اما برای مدیریت پیچیده‌تر و قابل پیش‌بینی‌تر state مناسب‌تر است. به‌جای به‌روزرسانی مستقیم state، با استفاده از useReducer می‌توانید اقداماتی را که نحوه به‌روزرسانی state را مشخص می‌کنند، ارسال کنید. سپس با کمک تابع reducer، state بر اساس این اقدامات به‌روزرسانی می‌شود.

یکی از مزایای استفاده از useReducer برای مدیریت درخواست‌های سرور، جداسازی بهتر مسئولیت‌هاست. به‌جای پراکنده بودن منطق مدیریت درخواست‌ها در تمام بخش‌های کامپوننت، این منطق می‌تواند در تابع reducer متمرکز شود. این کار باعث می‌شود که کد کامپوننت ساختار بهتری پیدا کند و نگهداری و درک آن راحت‌تر شود.

برای استفاده از این روش و مدیریت درخواست‌های سرور با استفاده از useReducer و به‌روزرسانی state کامپوننت، کد موجود در فایل app.js را با کد زیر جایگزین کنید:

import { useReducer } from 'react';

const initialState = { data: [], loading: false, error: '' };
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload, loading: false };
    case 'FETCH_DATA_FAILURE':
      return { ...state, error: action.payload, loading: false };
    default:
      return state;
  }
};

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const fetchData = async () => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const data = await response.json();
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };

  return (
    <div>
      {state.loading ? (
        <p>Loading...</p>
      ) : state.error ? (
        <p>{state.error}</p>
      ) :
        <div>
          {state.data.map((item) => (
            <div key={item.id}>
              <h2>{item.title}</h2>
              <p>{item.body}</p>
            </div>
          ))}
        </div>
      )}
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
}

export default MyComponent

در کد بالا، از هوک useReducer برای مدیریت وضعیت درخواست‌های سرور استفاده شده است. وضعیت اولیه کامپوننت شامل یک آرایه خالی برای داده‌ها ،مقدار false برای متغیر loading و یک پیام خطای خالی است. زمانی که کاربر دکمه “Fetch Data” را می‌زند، تابع fetchData اجرا می‌شود و بسته به وضعیت درخواست، اکشن‌هایی مثل موفقیت یا شکست ارسال می‌کند. این کار باعث می‌شود که مدیریت وضعیت‌ها تمیزتر و ساختار یافته‌تر شوند.

هوک useReducer علاوه بر فراهم کردن امکان مدیریت حالت پیچیده‌تر، به توسعه‌دهندگان این اجازه را می‌دهد که حالت‌های متعدد را با دقت بیشتری مدیریت کنند. با استفاده از اکشن‌ها، برای به‌روزرسانی وضعیت، این روش به راحتی اجازه می‌دهد تا تغییرات متنوع وضعیت‌های مختلف را بررسی و مدیریت کنید و بتوانید به سادگی ویژگی‌های جدید را به سیستم اضافه کرده یا مشکلات موجود را شناسایی و رفع کنید.

همین الان، هاست ابری React را در لیارا با سرعت بالا راه‌اندازی کنید.
✅ بدون نیاز به پیکربندی ✅ استقرار آسان ✅ مناسب برای React
خرید هاست React

جمع‌بندی

در این آموزش از لیارا، مباحث پایه‌ای بهینه‌سازی درخواست‌های سرور با استفاده از هوک‌های React پوشش داده شد. هوک‌های React یک ویژگی کاربردی و قدرتمند در این کتابخانه هستند که به توسعه‌دهندگان امکان می‌دهند تا از state و سایر قابلیت‌های React در کامپوننت‌های تابعی استفاده کنند. با استفاده از هوک‌های useEffect، useMemo و useReducer می‌توان به‌راحتی درخواست‌های سرور را مدیریت و بهینه‌سازی کرد؛ کاری که در نهایت منجر به بهبود زمان بارگذاری، عملکرد بهتر و تجربه کاربری مطلوب‌تر می‌شود.

سوالات متداول

چرا باید درخواست‌های سرور را در React بهینه‌سازی کنم؟

زیرا بهینه‌سازی درخواست‌های سرور در React باعث افزایش سرعت بارگذاری صفحات، بهبود تجربه کاربری و کاهش فشار روی سرور می‌شود.

آیا بهینه‌سازی درخواست‌های سرور در React می‌تواند بر عملکرد کلی اپلیکیشن تأثیر بگذارد؟

بله، بهینه‌سازی درخواست‌های سرور می‌تواند تأثیر زیادی بر عملکرد اپلیکیشن داشته باشد.

 کدام نسخه‌های React شامل هوک‌ها هستند؟

هوک‌ها از نسخه 16.8.0 React به آن اضافه شدند و در‌حال‌حاضر، در نسخه‌های زیر عملکرد بهتری دارند:

• React DOM
• React Native
• React DOM Server
• React Test Renderer