توانمندسازی اپ‌ها با هوک‌ها: طراحی هوک سفارشی

مقدمه

یکی از قدرتمندترین قابلیت‌هایی که هوک‌ها به ما ارائه می‌دهند، توانایی ساخت «هوک‌های سفارشی» یا Custom Hooks است. هوک‌های سفارشی به ما اجازه می‌دهند تا منطق stateدار (stateful logic) را از یک کامپوننت استخراج کرده و آن را بین چندین کامپوننت مختلف به اشتراک بگذاریم. این یکی از اصلی‌ترین راه‌حل‌ها برای مشکل اشتراک‌گذاری کد در React است.

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

قوانین ساخت یک هوک سفارشی

یک هوک سفارشی در واقع یک تابع جاوااسکریپت عادی است که دو قانون اصلی را رعایت می‌کند:

نام آن با کلمه use شروع می‌شود: این یک قرارداد است که به React و linterها اجازه می‌دهد تا تشخیص دهند که این تابع یک هوک است و قوانین هوک‌ها باید در داخل آن رعایت شود. برای مثال: useFormInput یا useFetch.
می‌تواند هوک‌های دیگر را فراخوانی کند: منطق اصلی یک هوک سفارشی، استفاده از هوک‌های داخلی React (مانند useState و useEffect) برای ساخت یک قابلیت جدید است.

مثال عملی: ساخت هوک useFormInput

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

JAVASCRIPT (React) - hooks/useFormInput.js

import { useState } from 'react';

function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return {
    value: value,
    onChange: handleChange
  };
}

export default useFormInput;

این هوک سفارشی یک مقدار اولیه را دریافت می‌کند، یک متغیر state برای نگهداری مقدار فعلی ایجاد می‌کند، و یک تابع handleChange برای به‌روزرسانی آن تعریف می‌کند. در نهایت، یک شیء شامل مقدار فعلی و تابع handler را برمی‌گرداند.

استفاده از هوک سفارشی در یک کامپوننت

حالا می‌توانیم از این هوک در کامپوننت فرم خود برای مدیریت چندین فیلد ورودی استفاده کنیم، بدون اینکه نیاز به تکرار منطق useState و handleChange برای هر کدام داشته باشیم.

JAVASCRIPT (React)

import useFormInput from './hooks/useFormInput';

function RegistrationForm() {
  const firstNameProps = useFormInput('');
  const lastNameProps = useFormInput('');

  return (
    <>
      <label>
        First name:
        <input {...firstNameProps} />
      </label>
      <label>
        Last name:
        <input {...lastNameProps} />
      </label>
      <p><b>Good morning, {firstNameProps.value} {lastNameProps.value}.</b></p>
    </>
  );
}

در این کامپوننت، ما هوک useFormInput را دو بار برای مدیریت دو فیلد ورودی مجزا فراخوانی می‌کنیم. هر فراخوانی، state کاملاً مستقل خود را دارد. ما از سینتکس spread ({...firstNameProps}) برای پاس دادن value و onChange به هر <input> استفاده کرده‌ایم که کد را بسیار تمیز و مختصر می‌کند.

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

شما می‌توانید برای هر منطق stateدار تکراری در اپلیکیشن خود (مانند دریافت داده از API کار با localStorage یا مدیریت وضعیت یک انیمیشن) یک هوک سفارشی بسازید. در درس پایانی این فصل، به «قوانین استفاده از هوک‌ها و خطاهای رایج» خواهیم پرداخت تا با نحوه استفاده صحیح و ایمن از این ابزار قدرتمند آشنا شویم.

درس قبل درس بعد