React 101
สวัสดีครับ วันนี้ผมจะมาอธิบายการทำงานต่างๆ ของ feature หนึ่งที่เรียกว่า Hook ของ React ว่ามันคืออะไร มีอะไรบ้าง แล้วแต่ละอย่างมีหน้าที่บทบาทอย่างไรกับ React
ก่อนที่จะไปรู้จักกับ hooks เรามารู้จักกับ React กันแบบสั้นๆกันก่อนดีกว่าว่ามันคืออะไร ขออนุญาติ บล็อคของพี่คนนี้ในการอธิบายนะครับ
React คืออะไร ?
React คือ JavaScript Library ที่ทีม Facebook เป็นคนพัฒนาขึ้นมา และเปิดให้คนทั่วไปนำมาใช้ฟรี ซึ่งเว็บไซต์ในปัจจุบันของ Facebook.com ก็ใช้ React อยู่เช่นกันครับ
สรุปคือ คอนเซปต์ที่เราต้องรู้เพื่อเขียน React หลัก ๆ มีแค่ 3 Concept เท่านั้นเอง
- Component — ส่วนต่าง ๆ ในเว็บเราจะมองเป็น Component
- State — ข้อมูลที่อยู่ใน Component แต่ละชิ้น เราเรียกว่า State
- Props — ข้อมูลที่ถูกส่งต่อจาก Component ชั้นบนลงไปชั้นล่าง เราเรียกว่า Props (Properties)
ต่อไปผมจะมาแนะนำ hooks ที่ตัวผมเองนั้นใช้เป็นหลักๆเลยของ feature นี้ของ React
- useState // ใช้จัดการค่า state ต่างๆของ React
- useEffect // ใช้จัดการ side effect ต่างๆ ของ liftcycle ใน component เช่น บางทีเราอยากจะรันโค้ดบางอย่างหลังจากที่มีค่าตัวแปรตัวนึงมีการ update
- useCallback // เอาไว้บอก function นั้นว่าควร complie function ตอนไหนบ้าง (Performance)
- useMemo // คล้ายกับ useCallback แต่ใช้กับตัวแปร (Performance)
- useContext // เอาไว้ส่งข้อมูลข้าม component จากแม่ไปสู่ลูกและหลาน เหลน โหลน โดยไม่ต้องผ่าน props
- Custom hook (Highlight) // อันนี้เป็นการเขียน function รูปแบบหนึ่งที่สามารถใช้ hooks ได้
Rules of hooks
hooks มีกฎอยู่ง่ายๆว่า
- hooks ต้องใช้กับ function component เท่านั้น
- เรียกใช้ hooks ในส่วน top level ของ component ก่อนที่จะมีการ return ใดๆ
- ห้ามเรียกใช้ hooks ใน loop, เงื่อนไข, หรือ function ลึกๆ
- ไม่สามารถ เรียกใช้ hooks ใน function ธรรมดาของ javascript ได้ แต่เราสามารถใช้ใน custom hooks ได้ (และนี่คือที่มาของ custom hook ซึ่งเดี๋ยวผมจะอธิบายในบทถัดๆไป สนุกแน่นอน)
บทความนี้ผมจะอธิบายเป็นแบบ function component ทั้งหมด ส่วนหนึ่งเพราะปีที่ผมจบมา ตอนนั้น React มี hooks แล้ว ส่วนตัวไม่เคยเขียน แบบ class เลย
เรามาเริ่มกันดีกว่า เกริ่นไว้ซะเยอะ
useState
useState คือ function นึง ของ hooks ที่ใช้ในการจัดการ state ต่างๆ
ทำไมถึงต้องใช้ state ใช้ตัวแปรปกติไม่ได้หรอ คำตอบคือไม่ได้ ถ้าอยากให้ ค่าตัวแปรนั้น update แล้วให้ UI ที่แสดงมีค่าเปลี่ยนแปรงตาม เราจำเป็นที่จะต้องใช้ state เป็นตัวจัดการและบอกกับ React แล้ว React จะสามารถรู้ว่า ค่าตัวไหนมีการอัพเดทและ UI จะอัพเดทตาม แต่ถ้าเป็นตัวแปรปกติ ถ้าค่าตัวแปรมีการอัพเดท ตัวแปรตัวนั้นจะ update ค่าแต่ว่าหน้า UI จะไม่สามารถ update ตามได้เพราะ react จะไม่รู้ว่ามีการเปลี่ยนแปรงค่า เราจึงต้องใช้ state เป็นตัวบอก
หน้าตาของ useState จะประมาณนี้
สิ่งที่ควรสังเกตุ ของ useState นั้นมีอยู่ 2 ตัวคือ สิ่งที่มัน return ออกมาและ argrument ที่เราต้องส่งเข้าไป
จากตัวอย่างนี้ผมสร้าง state หนึ่งตัวขึ้นว่าชื่อว่า count สิ่งที่มันคืนกลับมาให้คือ array 2 ตัว ตัวแรกจะเป็น ค่า state นั้นๆ และตัวถัดมาจะเป็น function ในการ set state เข้าไปใหม่ ในที่นี้คือ setCount และส่วนที่เป็น argrument ที่ส่งเข้าไปคือจะเป็นการบอกว่า state ตัวนี้ default value คืออะไร เช่น ตัวอย่างคือผมใส่ 0 เข้าไป เพราะฉะนั้น ตัวแปร count จะมีค่าเท่ากับ 0 แต่ถ้าหาก ผมใส่ 10 เข้าไปใน argrument count ก็จะมีค่า default value เป็น 10
เรามาลองใช้จริงกันดีกว่า
ตัวอย่างผมจะให้ click ปุ่มแล้วให้ set state ใหม่เป็น 10 แล้วมาลองดูกัน try in codesandbox
การ update state จากค่าเดิมของตัวมันเองมี 2 วิธี
วีธีแรกจริงๆก็ใช้ได้ และคนที่เพิ่งเริ่มใช้ hook ใหม่ๆ ผมเชื่อว่าเกือบทุกคนเคยเขียนแบบนี้ แต่ react แนะนำให้ใช้วิธีที่สอง ตัว function set state จะส่ง callback กลับมา และเราสามารถเอาค่าที่มัน callback กลับมาใช้แบบถูกต้องตาม react แนะนำ
ลองมาประยุกต์ใช้กันหน่อยสิ๊
ตัวอย่างผมจะให้กด ปุ่มแล้วเพิ่มทีละ 1 และก็ลบทีละ 1 และก็มี ตัว reset ค่า try in codesandbox
และอีกอย่างที่สำคัญ function set state ทำงานแบบ asynchronous ถ้าหากเราเรียกใช้ set state แล้วมันจะทำงานถัดไปต่อโดยทันที โดยไม่รอให้ function set state ทำงานเสร็จ ถ้าหากเราเรียกใช้ set state ติดๆกัน บางทีอาจจะทำให้ state เกิดการผิดพลาดได้
ข้อควรระวัง** สำหรับการ set state ตอนผมเริ่มเขียนใหม่ๆก็เคยเจอ และตาม กลุ่ม react ตอนนี้ผมก็ยังเห็นมือใหม่ยังเจอแบบนี้กันอยู่
ถ้าหากเรา set state ใน function บางอย่างแล้วเราเรียกใช้ค่านั้นเลยในทันที สิ่งที่ได้จากโค้ดตัวอย่างข้างบน คนที่เริ่มเขียนใหม่ๆก็คงจะคิดว่า count จะมีค่าเท่ากับ 1 แต่ไม่เลย ในโค้ดตัวอย่างถ้า log ออกมาค่าจะยังเป็น 0 อยู่
ผมก็ไม่ชัวร์เหมือนกันว่ามันเป็นเพราะอะไร แต่ที่รู้ๆ state จะทำการ update เมื่อ function handleSomething นี้ทำงานเสร็จ ถ้าหากเอา log ไว้ข้างใน function หลังจาก set state ค่าจะยังเป็น 0 แต่ถ้าหากเอา log ไว้ข้างนอก ค่า state จะถูก update และกลายเป็น 1
วิธีที่ผมใช้ประจำคือจัดการตัว state นั้นให้เรียบร้อยก่อนแล้วนำไปใช้แบบนี้
useState ใช้ได้กับ value ทุกประเภทเลยนะครับ บทความนี้ผมยกตัวอย่างมาแค่ integer เราสามารถใช้กับ string, object, array ได้หมดเลย
ก็จบไปแล้วนะครับ สำหรับตัว useState พื้นฐานแบบบ้านๆ เดี๋ยวจะมีบทความต่อๆไปสำหรับ hooks ตัวอื่นๆอีก ถ้ามีบทความต่อไป เดี๋ยวผมจะเอาลิ้งมาอัพเดทกันนะครับ รับรองว่าซิ่ง 5555
- useState ✅
- useEffect ลิงค์
- useCallback // Coming soon…
- useMemo // Coming soon…
- useContext // Coming soon…
- Custom hook // Coming soon…
ก่อนจากกันไป จริงๆแล้วผมเขียนบทความนี้เป็นบทความแรก ถ้าหากมีอะไรผิดพลาดตรงไหนประการใด ผมขออภัยไว้ ณ ที่นี้ด้วยนะครับ ขอบคุณที่เข้ามาอ่านกันครับ 🙏🙇♂️
Ref.
- https://www.designil.com/react-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/
- https://medium.com/@pakawatmange/react-909-props-f8a40e361873
- https://www.borntodev.com/2020/07/31/react-state/
- thanks for free image wallpaper https://wallpaperbat.com/react-wallpapers
