4 ข้อควรรู้เกี่ยวกับ React Hooks

Hooks เป็นฟีเจอร์ใหม่ที่มาพร้อมกับ React เวอร์ชัน 16.8 เพื่อให้เราสามารถใช้งาน state และเรียกใช้ features ต่างๆ ของ React ได้ โดยที่ไม่ต้องเขียนแบบ class component ยกตัวอย่าง เช่น เราสามารถใช้ useEffect แทน componentDidMount ได้ เป็นต้น

.
ส่วนคนที่เขียน React Native ก็เขียนได้เลยนะ แต่ต้องเป็นเวอร์ชัน 0.59 ขึ้นไปครับ

.
1. แนะนำให้เขียน React Hooks สำหรับโปรเจคใหม่เลย (ในหลักสูตรใหม่ที่ผมจะเปิดสอนจะพาเขียน Hooks เป็นหลักทั้งหมดครับ แต่จะพูดถึง class component ด้วยเช่นกัน) ถ้าโปรเจคเดิมใช้แบบ class component อยู่ก็ไม่ต้องตามแก้เป็น Hooks นะครับ ใช้ของเดิมได้เลย เพราะไม่มีแผนที่จะเอา class component ออกจาก React อยู่แล้ว

.
2. ทำไมเราต้องเปลี่ยนมาเขียน Hooks ด้วย เพราะช่วยป้องกันและแก้ไขปัญหาต่างๆ เช่น

– ถ้า component เรามีขนาดใหญ่ จะทำให้การ refactor และ test โค้ดต่างๆเป็นไปได้ยาก

– แก้ปัญหาเรื่อง Logic หรือ Lifecycle ซ้ำๆ กันระหว่างแต่ละ Component

– และหากเราใช้ Pattern เช่นพวก HOC หรือ render props ที่มีความซับซ้อน จะยากมากๆ ต่อการ debug ครับ และที่สำคัญอีกอย่างคือ การเขียน Hooks ทำให้ขนาดไฟล์เราเล็กลงด้วยนะ

.
3. กฏของการเขียน Hooks มี 2 ข้อ ได้แก่ ให้เขียนและใช้ Hooks ที่ top level เท่านั้น อย่าเขียนใน loops, conditions หรือ nested functions และ ต้องเขียนเป็น function component ของ React เท่านั้นนะ ห้ามเขียนในฟังก์ชันของ javascript ปกติ ยกเว้นจะเขียน custom Hooks ครับ

.
4. สำหรับคนที่ใช้ React Router และ React Redux อยู่ ตอนนี้ก็รองรับ Hooks แล้วนะครับ และคนที่ใช้ GraphQL และ Apollo ก็เขียนได้แล้ว ลองเปลี่ยนมาเขียนได้เลยนะ

.
ใครสนใจศึกษา React Hooks ก็ตามไปดูได้นะ => https://reactjs.org/docs/hooks-intro.html

ไว้มีโอกาสจะมาเขียนให้อ่านกันอีกครับ

.
โค้ชเอก

โค้ชเอก

โค้ชเอก

Coding Mentor

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.