React State vs. React Hook

Why are hooks better than classes?

3 min readSep 17, 2021

ก่อนจะพูดถึงเนื้อหาหลัก เรามาดูเรื่อง React Component กันก่อนนะครับ เพราะ React State กับ React Hook ต่างก็เป็น Component ด้วยกันทั้งคู่!!

React Components

อธิบายง่าย ๆ Component ก็เปรียบเสมือน Function ใน JavaScript แต่จะต่างกันตรงที่ Component จะ return ค่าเป็น HTML เสมอผ่าน function ที่ชื่อ render()

Functional Components vs. Class Components

React Components จะแบ่งออกเป็น Functional Components กับ Class Components ซึ่งในปัจจุบันจะนิยมใช้ Functional Component มากกว่า !?

เพราะ React ที่มี version ตั้งแต่ 16.8 ขึ้นไปได้มีการนำ Hooks เข้ามาใช้สำหรับทำ state และเรียกใช้ feature อื่น ๆ ของ React ได้โดยไม่ต้องเขียน class !!!

เนื่องจากการใช้ state ในสมัยก่อน (ก่อนที่จะมี Hooks เข้ามา) จำเป็นจะต้องสร้าง Class Components และตามด้วย extends React.Component ก่อนซึ่งเป็นวิธีสร้าง component เพื่อใช้ State แบบดั้งเดิม

Comparison between Functional component and Class component <Ref>

React State

เนื่องจากคุณสมบัติของ React Component ที่ทำงานเป็นอิสระต่อกัน ส่งผลให้ UI ที่เกิดจากการนำแต่ละ Component มาประกอบเข้าด้วยกันนั้น จะอัพเดตข้อมูลเฉพาะส่วนที่มีการเปลี่ยนแปลง (ข้อมูล)

โดยเราจะเรียก `ข้อมูล ณ ขณะนั้น` ของแต่ละ Component ว่า State (สถานะ) หาก State ใดมีการเปลี่ยนแปลง Component นั้นก็จะถูก render ใหม่โดยอัตโนมัติ เนื่องจาก State เป็น Object ที่ถูก built-in มาตอนเราสร้าง Class Component นั่นเอง

Reference: React State | borntoDev Creator

ตัวอย่าง Class Component `Me` <Reference>

Defining & Implement State

หากมีข้อมูลหลายอย่างที่ต้องการใช้ เราสามารถสร้างหลาย ๆ property ใน this.state ได้เลย (ดูตัวอย่างในบรรทัดที่ 4 ถึง 6) และเมื่อเราต้องการนำข้อมูลไปแสดงผลก็สามารถเรียกใช้งาน State ด้วยคำสั่ง this.state.<property_name> (ดูตัวอย่างได้จากบรรทัดที่ 12 ถึง 13)

Updating value

หากเราต้องการอัพเดตค่าของ State ก็สามารถใช้คำสั่ง this.setState() ได้เลย ซึ่งเราจะไม่แนะนำให้ใช้คำสั่งในการเปลี่ยนค่า State โดยตรง เพราะจะทำให้การทำงานของ Component ผิดพลาดและค่าก็จะไม่อัพเดตด้วย

เนื่องมาจาก setState() จะทำงานแบบ Asynchronous นั่นหมายถึงหลังจากที่เราใช้คำสั่งนี้ ตัวโปรแกรมจะทำคำสั่งถัดไปทันทีโดยไม่รอให้ค่าของ State เปลี่ยนเสร็จก่อน และหากเราใช้ setState() หลาย ๆ ครั้งในเวลาไล่เลี่ยกัน React อาจจะยุบคำสั่งทั้งหมดให้เหลือเพียงคำสั่งเดียว ซึ่งจะทำให้ setState() ที่อ้างอิงค่าจาก state เก่าอาจทำงานไม่ถูกต้องนั่นเอง

React Hook

Hook คือ ฟังก์ชันที่ถูกเพิ่มเข้ามาใน React v16.7.0-alpha ที่ทำให้เราสามารถใช้ state และ feature ต่าง ๆ ของ React ได้โดยไม่จำเป็นต้อง implement Class นอกจากนี้เรายังสามารถใช้ Hook ภายใน function component ได้เลย

Get th.peeranut’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

เพราะโดยปกติหากเรากำลังเขียน function component แล้วมีความจำเป็นจะต้องเรียกใช้ state เราจะต้องทำการเปลี่ยนจาก functional component ไปเป็น class component ซะก่อนถึงจะสามารถเรียกใช้ state ได้

Hooks can only be used in functional components, not in-class components. Ref

Why Hooks?

แม้ว่า React Component จะช่วยให้เราสามารถจัดระเบียบ UI ขนาดใหญ่ด้วยการแบ่งออกเป็นส่วนเล็ก ๆ อีกทั้งสามารถนำกลับมาใช้ใหม่ได้ แต่ก็มีข้อจำกัดตรงที่:

However, we often can’t break complex components down any further because the logic is stateful and can’t be extracted to a function or another component. >Ref

ซึ่งถ้าหากเราต้องการเพิ่มพวก feature ต่าง ๆ ไม่ว่าจะเป็น animation / form handling / connecting to external data sources หรือสิ่งอื่น ๆ เข้าไปใน Component เดียว.. เราก็จะเจอปัญหาที่วนเวียนไปมา และหลีกเลี่ยงไม่ได้ดังนี้:

Huge components: ยิ่ง Component มีขนาดใหญ่ ยิ่งยากต่อการ refactor และ test
Duplicated logic: จากการใช้งาน lifecycle method อย่าง fetch, sort, and display data ในแต่ละ Component แม้ว่าจะนำ render() มาช่วยแก้ปัญหา แต่ก็ต้องใช้เวลามากขึ้นในการ restructure component
Complex patterns: จากความจำเป็นที่ Class component ต้องเรียกใช้ render() ทุกครั้งในการ return() เพื่อแสดงหน้า UI

What is a lifecycle method?

ก็คือ method ที่ใช้ควบคุมการแสดงผลของ UI ตั้งแต่ Component ถูกสร้างขึ้นมาจวบจนถอด Component ออกไป ซึ่งเราสามารถกำหนดการทำงานแต่ละช่วงของ method ได้ว่าจะให้ทำอะไรบ้าง หรือไม่ทำอะไรบ้าง อ่านเพิ่มเติม

นั่นจึงทำให้ Hook เป็นตัวเลือกที่ดีที่สุดในการแก้ปัญหาดังกล่าว เพราะ…

Hooks let us organize the logic inside a component into reusable isolated units because Hooks apply the React philosophy (explicit data flow and composition) inside a component, rather than just between the components. <Reference>