10 کاستوم هوک جذاب در react

10 کاستوم هوکی (Custom hook) که برنامه ی react jsتان را سبک تر و حرفه ای تر میکند:

در یکی دو سال اخیر react hookها بسیار ترند شده اند و کار را نیز برای برنامه نویس ها خیلی راحت تر کرده اند. هوک ها امده اند تا خلا ای که functional componentها در lifecycle method ها داشتند را پر کنند.

اما کاستوم هوک ها یا هوک هایی که خودمون مینویسیم چین ؟
در این هوک ها در حقیقت همون لاجیکی که در کدمون هست را میاییم تو یه تابع جدا گونه به صورت هوک مینویسیم که خب هم به هر چه بیشتر کامپوننت بندی کدامون کمک میکنه هم به reliability.

تو این پست 10 تا از این هوک های بدرد بخور رو معرفی میکنم :

1-useIdle

این هوک کاربر رو ترک میکنه که ایا در صفحه بیکاره یا داره کار و فانکشنالیتی انجام میده :))

import {useIdle} from 'react-use';
const Demo = () => {
  const isIdle = useIdle(3e3);
return (
    <div>
      <div>User is idle: {isIdle ? 'Yes ?' : 'Nope'}</div>
    </div>
  );
};

2-useInterval

این هوک برای توابعی که با interval و فاصله ی زمانی سر و کار دارند به کار میره که همچنین clearInterval رو هم به صورت اتوماتیک هندل میکنه. این هوک اجازه ی pause کردن اینترول رو هم میده:

import * as React from 'react';
import {useInterval} from 'react-use';
const Demo = () => {
  const [count, setCount] = React.useState(0);
  const [delay, setDelay] = React.useState(1000);
  const [isRunning, toggleIsRunning] = useBoolean(true);
useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? delay : null
  );
return (
    <div>
      <div>
        delay: <input value={delay} ={event => setDelay(Number(event.target.value))} />
      </div>
      <h1>count: {count}</h1>
      <div>
        <button ={toggleIsRunning}>{isRunning ? 'stop' : 'start'}</button>
      </div>
    </div>
  );
};

3- useScroll:

این هوک اجازه میده به ما که دیگه بدون استفاده کردن از event listener ایونت scrollرو بفهمیم و کامپوننت رو رندر کنیم :

import {useScroll} from 'react-use';
const Demo = () => {
  const scrollRef = React.useRef(null);
  const {x, y} = useScroll(scrollRef);
return (
    <div ref={scrollRef}>
      <div>x: {x}</div>
      <div>y: {y}</div>
    </div>
  );
};

4-useToggle

این هوک اجازه ی عوض کردن 2 تا استیت مثل true و false رو میده و دیگه لاجیک و کدنویسی تو برنامه رو کمتر میکنه :

import {useToggle} from 'react-use';
const Demo = () => {
  const [on, toggle] = useToggle(true);
return (
    <div>
      <div>{on ? 'ON' : 'OFF'}</div>
      <button ={toggle}>Toggle</button>
      <button ={() => toggle(true)}>set ON</button>
      <button ={() => toggle(false)}>set OFF</button>
    </div>
  );
}

5-useCookie

این هوک مقدار ذخیره شده در cookie رو با کالبک فانشکن میشه مقادیر رو اپدیت یا دیلیت کرد :

import { useCookie } from &quotreact-use&quot
const Demo = () => {
  const [value, updateCookie, deleteCookie] = useCookie(&quotmy-cookie&quot);
  const [counter, setCounter] = useState(1);
useEffect(() => {
    deleteCookie();
  }, []);
const updateCookieHandler = () => {
    updateCookie(`my-awesome-cookie-${counter}`);
    setCounter(c => c + 1);
  };
return (
    <div>
      <p>Value: {value}</p>
      <button ={updateCookieHandler}>Update Cookie</button>
      <br />
      <button ={deleteCookie}>Delete Cookie</button>
    </div>
  );
};

6-usePermission

این هوگ برای اجازه و دسترسی به APIها در براوزر استفاده میشه :

import {usePermission} from 'react-use';
const Demo = () => {
  const state = usePermission({ name: 'microphone' });
return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
}

7-useGeolocation

این هوک هم برای گرفتن اطلاعات مکانی و جغرافیایی مثل latitude, longitude, altitude کاربر استفاده میشه :)

import {useGeolocation} from 'react-use';
const Demo = () => {
  const state = useGeolocation();
return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
}

8-useNetworkState

این هوک باحال هم برای نشون دادن وضعیت اتصال فرانت و بک اند (Network status) استفاده میشه (می دونیم که وضعیت درخواست و پاسخ هامون تو نتورک با یه سری کد مثل 400 ,200, و ... مشخص میشه )

import {useNetworkState} from 'react-use';
const Demo = () => {
  const state = useNetworkState();
return (
    <pre>
      {JSON.stringify(state, null, 2)}
    </pre>
  );
}

9- useCopyToClipboard

برای کپی تکست به کلیپ برد ، همین قد خلاصه :)

const Demo = () => {
const [text, setText] = React.useState('');
const [state, copyToClipboard] = useCopyToClipboard();

return (
<div>
<input value={text} ={e => setText(e.target.value)} />
<button type="button" ={() => copyToClipboard(text)}>copy text</button>
{state.error
? <p>Unable to copy value: {state.error.message}</p>
: state.value && <p>Copied {state.value}</p>}
</div>
)
}

10-useError

این هوک هم برای dispatch یک ارور میتونیم استفاده کنیم :

import { useError } from 'react-use';
const Demo = () => {
  const dispatchError = useError();const clickHandler = () => {
    dispatchError(new Error('Some error!'));
  };
return <button ={clickHandler}>Click me to throw</button>;
};// In parent app
const App = () => (
  <ErrorBoundary>
    <Demo />
  </ErrorBoundary>
);

نتیجه گیری :

استفاده از هوک یکم زندگی رو راحت تر کرده برامون و کدها رو خلاصه تر کرده و خب خوانایی کد هم خیلی رفته بالا . اگه تو زمینه ی وب و برنامه نویسی کار میکنی خوشحال میشم توییترمو فالو کنی تا بیشتر اشنا بشیم :)