ساخت قلاب سفارشی ()useToggle

• 1 - ساخت قلاب ()useToggle
• 2 - استفاده از قلاب ()useToggle

در ابتداhook های useState و useCallback رو در سندمون import میکنیم useState برای ما یک value و همین طور یک تابع برای تغییر اون مقدار در اختیارمون قرار خواهد داد و همین طور از useCallback برای memorize کردن تابع هامون استفاده خواهیم کرد و مانند کد های پایین مقدار state و تابع های مورد نیاز رو به عنوان result در انتهای سندمون return خواهیم کرد . حالا وقتشه که بریم ببینیم چه طور میتونبم ازش استفاده کنیم .

1import { useState ,useCallback} from 'react';
2
3const useToggle = (initialState = false) => {
4    // Initialize the state
5    const [state, setState] = useState(initialState);
6    
7    // Define and memorize toggler function in case we pass down the component,
8    // This function change the boolean value to it's opposite value
9    const toggle = useCallback(() => setState(state => !state), []);
10    const close = useCallback(() => setState(false), []);
11    
12    return [state, toggle]
13}
14
15export default useToggle;

حال برای استفاده از این هوک جذاب میتونیم در مرحله اول هر جا که خواستیم اونرو import کنیم و با این syntax اون رو فراخوانی کنیم .

1const [isTextChanged, setIsTextChanged] = useToggle();

حالا میتونیم با یک مثال واقعی مفهوم رو بهتر درک کنیم . در اینجا من میخام که تابع setIsTextChanged رو به یک button بدم که کار toggle کردن bolean رو برای ما انجام بده و با یک ternary operator که در خط یازده قرار داره یک متن رو با هر کلیک تغییر بدم درسته اینجا یک مثال خیلی ساده زده شده ولی همیشه برای دریافت مفهوم باید از مثال های ساده شروع کرد .

1import Head from "next/head";
2import Image from "next/image";
3import useToggle from "../src/hooks/useToggle";
4import styles from "../styles/Home.module.css";
5
6export default function Home() {
7  const [isTextChanged, setIsTextChanged] = useToggle();
8
9  return (
10    <div className={styles.container}>
11      {isTextChanged ? <h1>I Changed</h1> : <h1>I did not change</h1>}
12
13      <button onClick={setIsTextChanged}>Click Me</button>
14    </div>
15  );
16}

خب حالا وقشته که بریم نتیجه ببینیم و تمام . درسته شاید الان کار خیلی پیچیده ای نکردیم ولی با بزرگ شدن و پیچیده شدن یک پروژه متوجه خواهیم شد که چقدر استفاده از hook ها میتونه به کمک ما بیاد تا هم cleanCode رو رعایت کرده باشیم و هم sourceCode کمتر داشته باشیم امیدوارم بهتون کمک کرده باشم .