useEffect Hook

ใช้สำหรับจัดการ side effects ในคอมโพเนนต์ฟังก์ชัน เช่น การดึงข้อมูล การสมัครสมาชิก หรือการเปลี่ยนแปลง DOM

import React, { useEffect } from 'react';

export default function ComponentDidMountExample() {
  useEffect(() => {
    // โค้ดที่ทำงานหลังจากคอมโพเนนต์ถูกเรนเดอร์ครั้งแรก
    console.log('Component did mount');

    // ฟังก์ชันสำหรับทำความสะอาด (cleanup)
    return () => {
      console.log('Component will unmount');
    };
  }, []); // อาร์เรย์การพึ่งพาเป็นค่าว่างหมายความว่าฟังก์ชันนี้จะทำงานเพียงครั้งเดียว

  return <div>ComponentDidMount Example</div>;
}

componentDidUpdate

ใช้เพื่อทำงานหลังจากการอัปเดต (การเรนเดอร์ใหม่) ของคอมโพเนนต์เมื่อพึ่งพาเปลี่ยนแปลง

import React, { useEffect, useState } from 'react';

export default function ComponentDidUpdateExample({ propValue }) {
  const [state, setState] = useState('');

  useEffect(() => {
    // โค้ดที่ทำงานหลังจาก propValue หรือ state เปลี่ยนแปลง
    console.log('Component did update');

  }, [propValue, state]); // อาร์เรย์การพึ่งพาที่มี propValue และ state หมายความว่าฟังก์ชันนี้จะทำงานเมื่อ propValue หรือ state เปลี่ยนแปลง

  return (
    <div>
      ComponentDidUpdate Example
      <button onClick={() => setState('new state')}>Update State</button>
    </div>
  );
}

componentWillUnmount

ใช้สำหรับทำความสะอาด (cleanup) ก่อนที่คอมโพเนนต์จะถูกลบออกจาก DOM

import React, { useEffect } from 'react';

export default function ComponentWillUnmountExample() {
  useEffect(() => {
    // โค้ดการตั้งค่า (setup)

    return () => {
      // โค้ดทำความสะอาด (cleanup)
      console.log('Component will unmount');
    };
  }, []); // อาร์เรย์การพึ่งพาเป็นค่าว่างหมายความว่าฟังก์ชันนี้จะทำงานเพียงครั้งเดียวในตอนติดตั้งและเมื่อคอมโพเนนต์จะถูกลบออก

  return <div>ComponentWillUnmount Example</div>;
}

Conditional Effects

ใช้ useEffect เพื่อทำงานตามเงื่อนไขที่พึ่งพาเปลี่ยนแปลง

import React, { useEffect, useState } from 'react';

export default function ConditionalEffectExample() {
  const [count, setCount] = useState(0);
  const [isToggled, setIsToggled] = useState(false);

  useEffect(() => {
    if (isToggled) {
      console.log('Toggled: ', count);
    }
  }, [count, isToggled]); // ทำงานเมื่อ count หรือ isToggled เปลี่ยนแปลง

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setIsToggled(!isToggled)}>Toggle</button>
    </div>
  );
}

useLayoutEffect Hook

คล้ายกับ useEffect แต่ทำงานทันทีหลังจากการปรับปรุง DOM ซึ่งเหมาะสำหรับงานที่เกี่ยวข้องกับการจัดการ layout

import React, { useLayoutEffect, useRef } from 'react';

export default function UseLayoutEffectExample() {
  const divRef = useRef(null);

  useLayoutEffect(() => {
    if (divRef.current) {
      console.log('Layout effect: ', divRef.current.clientHeight);
    }
  }, []); // อาร์เรย์การพึ่งพาเป็นค่าว่างหมายความว่าฟังก์ชันนี้จะทำงานเพียงครั้งเดียวหลังจากการปรับปรุง DOM

  return <div ref={divRef}>UseLayoutEffect Example</div>;
}

useReducer Hook

ใช้สำหรับการจัดการสถานะที่ซับซ้อน ซึ่งรวมถึงหลายค่า sub-values หรือเมื่อสถานะถัดไปขึ้นอยู่กับสถานะก่อนหน้า

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

export default function UseReducerExample() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}