5 کتابخانه برتر Hook در React

هوک در ری‌اکت با به روزرسانی نسخه React 16.8 معرفی شد. از آن زمان به بعد، در برنامه‌های ری‌اکت به یک ویژگی ضروری تبدیل شده است.

از هوک‌ها برای اتصال به ویژگی‌های ری‌اکت و چرخه عمر استفاده می‌شود.

هوک‌های زیادی در حال حاضر وجود دارد و بررسی همه آنها کاری دشوار است. بنابراین در این مقاله قصد داریم 5 کتابخانه برتر را معرفی کنیم که هر توسعه‌دهنده باید از آنها مطلع باشد.

برای آشنایی با فریمورک محبوب ری‌اکت و یادگیری بیشتر آن می‌توانید به این دوره ارزشمند در راکت مراجعه نمایید.

 1. React Redux

React Redux یک کتابخانه رسمی رابط کاربری برای ری‌اکت است.

Redux در بین توسعه‌دهندگان ری‌اکت بسیار محبوب است و React-Redux یک API هوک سفارشی ارائه می‌دهد که شما را قادر می‌سازد در فروشگاه Redux عضو شوید و اقدامات لازم را به انجام برسانید.

این یکی از پر کاربردترین کتابخانه‌های هوک در ری‌اکت به حساب می‌آید و دلایل قابل توجهی هم برای آن وجود دارد:

• با وجود کتابخانه رسمی Redux UX مطمئن می‌شوید که به روز شده و با آخرین نسخه‌های Redux و React نیز سازگار است.
• بهینه سازی عملکردی را فراهم می‌کند.
• داشتن مستندات دقیق و جامعه پشتیبانی عظیم.
• برخی از هوک‌های پرکاربرد مانند useSelector ،useDispatch  و useStore را ارائه می‌دهد.

به علاوه React Redux دارای بیش از چهار میلیون دانلود هفتگی با NPM و 21.3 هزار ستاره در گیت هاب است.

همچنین به راحتی می‌توانید این کتابخانه را با استفاده از دستور npm i react-redux نصب کنید. کد زیر یک مثال ساده از نحوه استفاده هوک‌های useSelector  و useDispatch را نشان می‌دهد.

import {useSelector, useDispatch} from "react-redux";
import React from "react";
import * as actions from "./actions";

const Foo = () => {
const increaseCount = useDispatch()
const counter = useSelector(state => state.counter)

return (
<div>
   <span>
     {counter.value}
   </span>
   <button onClick={() => increaseCount(actions.incrementCounter)}>
     Increase Count
   </button>
</div>
);
}

2. React Hook Form

React-Hook-Form یک کتابخانه هوک است که فرم‌های قابل توسعه را با اعتبارسنجی آسان کاربر ارائه می‌دهد.

این کتابخانه به دلایل زیر یکی از پر استفاده‌ترین کتابخانه‌های ری‌اکت است:

• دارای یک پکیج فشرده با حجم 8.6 کیلوبایت بدون هیچگونه وابستگی.
• می‌توان آن را به راحتی و بدون وابستگی‌های دیگر به کار گرفت.
• بر عملکرد، تجربه کاربر و تجربه توسعه‌دهنده تمرکز می‌کند.
• پشتیبانی از اعتبارسنجی داخلی (از استانداردهای HTML پیروی می‌کند).
• به راحتی قابل نگهداری است.

کتابخانه React-Hook-Form دارای بیش از 957 هزار دانلود هفتگی با NPM و 22.6 هزار ستاره در گیت هاب است.

همچنین به راحتی می‌توانید آن را با دستور npm i react-hook-form نصب کنید. کد زیر نشان می‌دهد که چگونه می‌توان از هوکuseForm  در یک برنامه ری‌اکت استفاده کرد.

import React from "react";
import useForm from "react-hook-form";

export default function Order() {
  const { signup, handleSubmit, errors } = useForm();
  const onSubmit = data => { 
    // On Submit Logic
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Full Name</label>
        <input name="fullname" ref={signup} />
        <label>User Name</label>
        <input
          name="username"
          ref={signup({ required: true, maxLength: 20 })}
        />
        <input type="submit" value="Register" />
      </form>
    </div>
  );
}

3. useLocalStorage

useLocalStorage یک هوک کوچک و در عین حال قدرتمند است که به راحتی امکان مدیریت داده‌های ذخیره سازی محلی را می‌دهد.

از آنجایی که ما همیشه از حافظه محلی در برنامه‌های وب استفاده می‌کنیم، آشنایی با این هوک می‌تواند واقعاً مفید باشد. همچنین دارای برخی از ویژگی‌های شگفت انگیز هم هست:

• پشتیبانی از TypeScript.
• سریال سازی خودکار JSON.
• همگام سازی در چندین تب.
• دارای مستندات خوب.

به علاوه پکیج هوکLocalStorage  حدود 20 هزار دانلود هفتگی با NPM دارد.

همچنین می‌توانید آن را با دستور npm i @rehooks/local-storage نصب کنید. کد زیر نشان می‌دهد که چگونه می‌توانیم روی حافظه محلی با استفاده از هوک useLocalStorage عملیات خواندن و نوشتن را انجام دهیم.

// Writing to Local Storage

import React from 'react';
import { writeStorage } from '@rehooks/local-storage';

let counter = 0;

const MyButton = () => (
  <button onClick={_ => writeStorage('i', ++counter)}>
    Increase Count
  </button>
);


// Reading from Local Storage

import React from 'react';
import { useLocalStorage } from '@rehooks/local-storage';

function MyComponent() {
  const [counterValue] = useLocalStorage('i');
  return (
    <div>
      <h1>{counterValue}</h1>
    </div>
  );
}

4. use-http

use-http به عنوان جایگزینی برای Fetch API عمل می‌کند و به شما امکان می‌دهد درخواست‌های http isomorphic ایجاد کنید.

به دلیل ویژگی‌هایی مانند پشتیبانی از رندرینگ سمت سرور و زبان TypeScript، نسبت به بقیه متمایز می‌شود. علاوه بر این ویژگی‌های هیجان انگیز دیگری که توسعه‌دهندگان را جذب می‌کند نیز ارائه می‌دهد:

• پشتیبانی از React Native.
• مدیریت درخواست / پاسخ.
• قابلیت کش داخلی و پشتیبانی از ذخیره سازی پایدار.
• پشتیبانی از تعلیق.
• پشتیبانی GraphQL با هوک‌های useQuery و useMutation.
• دارای حداقل وابستگی‌ها.

پکیج use-http دارای بیش از 18 هزار دانلود هفتگی با NPM و 2 هزار ستاره در گیت هاب است.

همچنین می‌توان آن را به راحتی با دستور npm i use-http نصب کرد. کد زیر نحوه استفاده از هوک useFetch را در کتابخانه use-http نشان می‌دهد.

import useFetch from 'use-http'

function Articles() {
  const options = {} 
  const { loading, error, data = [] } = useFetch('https://medium.com/articles', options, [])
  return (
    <>
      {loading && 'Loading...'}
      {data.map(article => (
        <div key={article.id}>{article.title}</div>
      )}
    </>
  )
}

5. React Recipes

React-recipes یکی دیگر از کتابخانه‌های جالب است که چندین هوک را ارائه می‌دهد.

این شامل بسیاری از امکاناتی است که ری‌اکت معمولا از آنها پشتیبانی نمی‌کند مانند APIهای مرورگر، مدیریت stateها و اجرای کد async.

useAdjustColor، useCookie،useDarkMode  و useGeolocation برخی از هوک‌های جذاب ارائه شده توسط React-recipes هستند و می‌توانید تمام جزئیات مربوط به این هوک‌ها را در مستندات آنها پیدا کنید.

همچنین می‌توانید آن را با دستور npm i react-recipes نصب کنید. مثال زیر نحوه استفاده از useAdjustColor را نشان می‌دهد.

import { useAdjustColor } from 'react-recipes';

const App = () => {
  const lightGray = useAdjustColor(0.7, '#000');
  const darkerWhite = useAdjustColor(-0.1, '#fff')
  return (
    <div>
      <div style={{ background: lightGray, height: '50px', width: '50px' }} />
      <div style={{ background: darkerWhite, height: '50px', width: '50px' }} />
    </div>
  );
};

جمع‌بندی

علاوه بر کتابخانه‌های مورد بحث در اینجا، کتابخانه‌های شگفت انگیز دیگری مانند usePortal ، useMedia و useHover نیز می‌توانند برای توسعه‌دهندگان بسیار مفید باشند. من عمدا برخی از آن‌ها را به منظور معرفی نمونه‌های متنوع در این لیست حذف کرده‌ام.

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

منبع