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> );نتیجه گیری :استفاده از هوک یکم زندگی رو راحت تر کرده برامون و کدها رو خلاصه تر کرده و خب خوانایی کد هم خیلی رفته بالا . اگه تو زمینه ی وب و برنامه نویسی کار میکنی خوشحال میشم توییترمو فالو کنی تا بیشتر اشنا بشیم :)