React : Hooks พื้นฐาน

React ได้เพิ่มการใช้งานฟังก์ชัน Hooks เข้ามาในเวอร์ชัน 16.8 ฟังก์ชัน Hooks ทำให้เราเขียนโค้ดสั้นลงกว่าเดิม ในบทความนี้จะเป็นเรื่องของการใช้งาน useState และ useEffect ซึ่งเป็นสองฟังก์ชันที่ใช้งานบ่อยมาก ก่อนอื่นสิ่งที่ต้องรู้ก่อนจะใช้ฟังก์ชัน Hooks คือ เราต้องเขียน component ให้อยู่ในรูปของ function component เท่านั้น เราไม่สามารถใช้ฟังก์ชัน hook ใน class component ได้

useState

useState เป็นการเรียกใช้งาน state และ การเปลี่ยนแปลงค่า state

ตัวอย่าง เราต้องการเปลี่ยนค่าตัวอักษรจาก Input ไปแสดงที่ Label

เริ่มต้นด้วยการ import { useState } from ‘react’ มาใช้งานก่อน

การกำหนดตัวแปร state จะมีค่าคืนกลับ 2 ค่า (ค่าจะอยู่ในอาเรย์) ได้แก่ ค่าของ state และ ฟังก์ชันการแก้ไขค่า state และ ค่าที่ใส่เป็นพารามิเตอร์ของ useState จะเป็นค่า default ของ state ตัวอย่างใส่ค่า “hello”

const [text, setText] = useState("hello")

useEffect

useEffect เป็นการเรียกใช้งานฟังก์ชัน useEffect เมื่อ component นั้นเกิดการเปลี่ยนแปลงค่าของ state ที่เราเล็งเอาไว้ หรือหากไม่กำหนดค่า state ที่เล็งเอาไว้ การทำงานของ useEffect จะทำงานเพียงครั้งเดียวคือก่อน component นั้นจะถูกแสดงขึ้นมา การใช้งาน จะต้อง import { useEffect } from ‘react’ มาใช้งานก่อน (ในโค้ดตัวอย่างจะมีทั้งการใช้งาน useState และ useEffect เวลาเรา import มาใช้งานพร้อมกันให้เขียน comma (,) ขั้นได้เลย)

ตัวอย่าง จากโค้ด useState ด้านบน เราเพิ่มการใช้งาน useEffect เข้าไปโดยที่ เขียนคำสั่งให้กำหนด state ให้เป็นคำว่า start text

1. การทำงานของโปรแกรม จะทำคำสั่ง useState ก่อน ค่าใน text = hello (กำหนดเริ่มต้นโดย useState)
2. เมื่อเข้ามาทำงานที่ useEffect ค่าใน text = start text (การทำงานของ useEffect จะทำแค่รอบเดียว เนื่องจากเราไม่ได้ใส่ ตัวแปร state ใดๆ ในพารามิเตอร์ตัวที่สองของฟังก์ชัน useEffect)
3. เมื่อ render ออกไปแล้ว โปรแกรมจะแสดงข้อความว่า start text ทั้งใน input และ label

import { useState, useEffect } from "react";

const MyComponent1 = () => {
  const [text, setText] = useState("hello");

// ++++ เพิ่มฟังก์ชัน useEffect
  useEffect(() => {
    setText("start text");
  }, []);

  return (
    <>
      <p>Text : {text}</p>
      <input onChange={(e) => setText(e.target.value)} value={text} />
    </>
  );
};

export default function App() {
  return (
    <div>
      <MyComponent1 />
    </div>
  );
}

ตัวอย่างที่ 2 การใช้งาน useEffect เมื่อเราต้องการให้คำสั่ง useEffect ทำงานเฉพาะตอนที่มีค่าใน state เปลี่ยนแปลงเท่านั้น เราสามารถใส่ตัวแปร state ไว้ที่ พารามิเตอร์ตัวที่ 2 ของ useEffect

เราจะเพิ่ม state ขึ้นมาอีก 1 ตัวชื่อว่า toggle ทำให้หน้าที่ reset text ให้กลับไปเป็นข้อความว่า start text โดยค่าของ toggle จะเป็น boolean

const [toggle, setToggle] = useState(false)

และเพิ่มปุ่มเข้ามา 1 ปุ่มเพื่อสั่งให้ reset ค่าของ text

เมื่อเรากำหนดตัวแปร state ใส่ลงใน useEffect จะทำให้ เมื่อค่าของตัวแปร state เปลี่ยนแปลง component นี้จะกลับมาทำงานในฟังก์ชัน useEffect อีกครั้งและ ทำการ render ใหม่

การประยุกต์ใช้งาน useEffect ส่วนใหญ่จะใช้กับการกำหนดค่าเริ่มต้นให้กับ component โดยเฉพาะ เป็นค่าที่ต้องดาวน์โหลดค่ามาจาก url เป็นการดาวน์โหลดเพียงครั้งเดียวตอนเริ่มต้น

การสั่งให้ useEffect จบการทำงาน หากต้องการให้มีการ clear ค่าการ subscribe หลังจากที่ component นั้นถูกถอดออกจาก component หลักแล้ว สามารถทำได้โดยเขียน return function ใน useEffect

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});

กฎการใช้ Hooks

• ข้อ 1 ต้องประกาศ Hooks ในส่วนของ Top level เท่านั้น ห้ามประกาศในส่วนของ loop, condition หรือ nested function เป็นอันขาด
• ข้อ 2 ต้องประกาศ Hooks ภายใน React Component function เท่านั้น ไม่สามารถประกาศใช้ใน javascript function ปกติได้

อ้างอิง : https://reactjs.org/docs/hooks-intro.html