การสร้าง Custom Hooks ใน React

สารจากผู้เขียน

Blog นี้เป็น Blog แรกที่ผมได้เขียนยังไงก็ฝากตัวด้วยนะครับ ในบทความนี้จะมาศึกษาเกี่ยวกับ React กันแต่เรื่องที่จะศึกษาและทำการสร้างกันคือตัวของ Custom Hook ซึ่งหลายคนน่าจะเคยได้ยินคำว่า React Hook กันมาใช่ไหมครับ แต่บทความนี้จะศึกษาและสร้าง Custom Hook กันว่าคืออะไรสร้างยังไงและใช้เพื่ออะไรครับ

สิ่งที่ควรรู้ก่อนที่จะไปศึกษาและสร้าง Custom Hook

• React Hook คืออะไรและมีอะไรบ้าง
• React Hook ทีใช้เป็นหลักและรองมีอะไรบ้าง
• หน้าที่ของ React Hook แต่ละตัวมีหน้าที่อะไรบ้าง

สำหรับคนที่มาใหม่ React Hook คืออะไร มีอะไรบ้าง

React Hook คือ function ที่ทำให้เราสามารถสร้าง state โดยเป็น feature ที่มาใหม่ใน React 16.8 เป็น feature ที่เรียกว่า Hook นั่นเอง โดยตัว Hook นั้นมีบทบาทในการสร้าง state ดังที่กล่าวข้างต้น โดยที่ไม่จำเป็นต้องทำการ implement ในส่วนของ class component ขึ้นมานั่นเอง ส่วนต่อไปนี่ผมจะยกตัวอย่าง Hook ทั้งหมดกันว่า Hook ไรบ้างที่ใช้บ่อยและใช้ในบางครั้งกันครับ

โดย Hook หลักๆ ที่นำมาใช้บ่อยจะมีดังนี้

• useState
• useEffect
• useReducer
• useContext

Hook เพิ่มเติมที่จะมีใช้บางครั้งจะมีดังนี้

• useRef
• useCallback
• useMemo
• useTransition
• useDeferredValue
• useLayoutEffect
• useDebugValue
• useImperativeHandel
• useId

จาก List ข้างต้นจะเป็น Hook ทั้งหมดที่มีให้ใช้ใน React ถ้าผมมีเวลาว่างจะมาเขียน Blog เกี่ยวกับหน้าที่กับการทำงานของ Hook ทั้งหมดให้นะครับ โดยข้อมูลนี้อ้างอิงจาก React V18.X นะครับ

Custom Hook คืออะไร

Custom Hook คือ การนำ state logic ของ React Hook ที่ใช้เฉพาะใน function นั้น นำมาสร้างเป็นรูปแบบของ function ขึ้นมาใหม่ ซึ่งสำหรับผมถ้าพูดถึงสิ่งใกล้ตัวให้เห็นภาพแล้วคงเทียบกับตัวของเครื่องดื่ม จำพวกโซดาครับ อย่างเช่น มะนาวโซดา, กีวีโซดา หรือ มะนาวโซดา เป็นต้น ส่วนผสมที่ต่างกันจะเป็นส่วนของ syrup หากจะเปรียบ ก็จะเหมือน function ตัวหนึ่ง และตัวของโซดาเปรียบเหมือนตัวของ Custom Hook ตัวนึงครับ

ซึ่งถ้ามองในด้านการเขียนโปรแกรมจะเห็นได้ว่า การเขียน Function ถ้ามีการใช้ Hook ที่มี state เดียวกันซ้ำ ๆ ถ้าไม่ใช้ Custom Hook จะส่งผลให้เวลาจะใช้ Function นึงแล้วจะส่งผลให้เราต้องเขียน state logic เดิมซ้ำ ๆ ในทุกฟังก์ชันครับซึ่งการสร้างฟังก์ชันของ Custom Hook มามีส่วนช่วยทำให้การนำไปใช้นั้น มีความยืดหยุ่นและงายต่อการปรับปรุงหรือพัฒนาต่อมากยิ่งขึ้นครับ

โดยการสร้าง function ของ Custom Hook นั้นจะใช้ชื่อขึ้นต้นว่า use ตามด้วยชื่อของ state ที่จะตั้ง โดยใน Function จะประกอบไปด้วย state logic ที่ต้องการนำไปสร้างฟังก์ชันของ Custom Hook ตัวนั้น ๆ และการ return ค่าออกมาจะ return ในรูปของ [] หรือ {} และการนำไปใช้จะอยู่ในรูปของ {}

ในส่วนนี้ผมจะยกตัวอย่าง use case ของการใช้ Custom Hook ให้เห็นภาพกันครับซึ่งตัวอย่างผมจะมีทั้งรูปแบบปกติและใช้ Custom Hook ครับ

Ex. Counter Value

โดยตัวอย่างแรกจะเป็นตัวอย่างอย่างง่ายคือโปรแกรม Counter ครับ เดี๋ยวผมจะอธิบายการทำงานของโค้ดด้านล่างจากส่วนที่ไม่ใช้ Custom Hook ให้เห็นภาพก่อนนะครับ

โดยโปรแกรมนี้การทำงานก็คือการเพิ่มค่าหรือลดค่าครั บโดยถ้าผมอธิบายจากโค้ดการทำงาน จะมี state logic ตัวนึงคือตัวของ count หรือก็คือตัวเก็บค่าของการนับ ซึ่งใน Function App จะมี function ตัวของ handleIncrement โดยฟังก์ชัน handleIncrement จะเป็นฟังก์ชันสำหรับการเพิ่มค่าของ count ขึ้น กับตัวของฟังก์ชัน handleDecrement ที่เป็นฟังก์ชันสำหรับการลดค่าของ count ลงครับโดยจะเพิ่มหรือลดค่าในปุ่มของ button ครับ

ในส่วนของโค้ดนั้นผมจะมีตัวอย่างให้เห็นทั้งส่วนที่ใช้ Custom Hook และไม่ใช้ Custom Hook ให้เห็นภาพกันครับ

ส่วนที่ไม่ใช้ Custom Hook

import React, { useState } from 'react';

export default function App(){
    const[count,setCount] = useState()

    function handleIncrement(){
        setCount(prevCount => prevCount + 1)
    }

    function handleDecrement(){
        setCount(prevCount => prevCount - 1)
    }
    
    return(
        <div>
            <button  onClick={handleIncrement}>+</button>
            <h1>{count}</h1>
            <button  onClick={handleDecrement}>-</button>
        </div>
    )
}

ส่วนที่ใช้ Custom Hook

import React, { useState } from 'react';

function useCounter(){
    const[count,setCount] = useState()
    function handleIncrement(){
        setCount(prevCount => prevCount + 1)
    }

    function handleDecrement(){
        setCount(prevCount => prevCount + 1)
    }

    return {count,handleDecrement,handleIncrement}
}


export default function App(){
    const {count,handleDecrement,handleIncrement} = useCounter()
    
    return(
        <div>
            <button  onClick={handleIncrement}>+</button>
            <h1>{count}</h1>
            <button  onClick={handleDecrement}>-</button>
        </div>
    )
}

โดยด้านบนนี้จะเป็นโค้ดการทำงานระบบ counter หรือการนับจำนวนเหมือนกันนะครับ แต่ที่แตกต่างกันคือการใช้ส่วนของ custom hook เข้ามาช่วยประกอบการทำงานที่มากขึ้นโดยผมจะแยกฟังก์ชันเพิ่มลดค่าและ state logic ของตัว count ออกจากตัวของ Function App ครับ จะเห็นได้ว่าจากโค้ดส่วนของการใช้ custom hook ในส่วนของ useCounter ครับ ซึ่งถ้านำไปใช้ในแอพพลิเคชั่น scale ที่ใหญ่กว่านี้หน่อยจะไม่มีปัญหาในการเขียนตัวของ state logic กับฟังก์ชันซ้ำอีกรอบแล้วครับถ้าเทียบกับส่วนที่ไม่ใช้ Custom Hook จะเห็นได้ว่าถ้าต้องเขียนฟังก์ชันใหม่จะต้องเขียน state logic ตัวนั้นซ้ำอีกครับซึ่งถ้าทำงานสเกลใหญ่ก็ต้องเสียเวลาครับ

จะเห็นได้ว่าการใช้ Custom Hook ทำให้ code สะอาดมากขึ้นและทำให้สามารถนำตัวของ Custom Hook ส่วนนี้นำไปใช้กับฟังก์ชันอื่นได้มากขึ้นและมีความยืดหยุ่นในการใช้งานตามมาครับ และในบางโปรเจ็คที่มีขนาดใหญ่ Custom Hook ถือว่ามีส่วนช่วยในการทำให้โค้ดใช้งานง่ายมากขึ้นครับ

สรุป

ก็จบกันไปแล้วสำหรับบทความเกี่ยวกับเรื่องของการสร้าง Custom Hook ครับ เป็นไงกันบ้างครับกับการนำ custom hook มาใช้ประกอบการเขียนโค้ดครับ ซึ่งถ้าสังเกตการนำ Custom Hook มาใช้กับการเขียนโค้ดแล้วจะเห็นได้ว่าทำให้ code ดูสะอาดขึ้นและง่ายต่อการ Maintenance และการปรับปรุงงานได้ง่ายขึ้นมากเลยใช่ไหมครับ หวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการนำไปใช้และต่อยอดในงานของตัวเองได้นะครับ หวังว่าคงได้เจอกันในบทความต่อๆไปนะครับ สวัสดีครับ

อ้างอิง & แหล่งข้อมูลเพิ่มเติม

1. Creating custom hook for fetching data in react (Keyur Paralkar)
2. Understanding React Hooks (sst.dev)
3. ทำความเข้าใจ React Hooks จาก useState ไปถึง Custom Hooks (devopenworld)
4. React Hooks คืออะไร? + มาลองหัดใช้กันดีกว่า