tiktok นับยอดวิวยังไง

useEffect hook ใน Next.js เป็น hook ที่ช่วยให้คุณสามารถเรียกใช้ฟังก์ชันที่กำหนดเองเมื่อส่วนประกอบของคุณถูกสร้างขึ้นหรืออัปเดต

ฟังก์ชันที่คุณเรียกใช้ด้วย useEffect hook เรียกว่า effect

effect สามารถใช้เพื่อ:

• ดึงข้อมูลจากแหล่งข้อมูลภายนอก
• จัดการ state ของส่วนประกอบ
• เรียกใช้ฟังก์ชันซ้ำ ๆ

ตัวอย่างเช่น ไฟล์ต่อไปนี้จะดึงรายการโพสต์จาก API โดยใช้ useEffect hook:

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

export default function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    // Fetch the posts from the API
    axios.get('/api/posts').then((response) => {
      setPosts(response.data);
    });
  }, []);

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          {post.title}
        </li>
      ))}
    </ul>
  );
}

ไฟล์นี้ใช้ useEffect hook เพื่อดึงรายการโพสต์จาก API

ฟังก์ชัน effect จะถูกเรียกใช้เมื่อส่วนประกอบถูกสร้างขึ้นหรืออัปเดต

เมื่อฟังก์ชัน effect เรียกใช้ มันจะดึงรายการโพสต์จาก API และเก็บไว้ใน state ของส่วนประกอบ

ข้อมูลนี้จะถูกใช้เพื่อแสดงรายการโพสต์ในหน้า

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ useEffect hook จากเอกสารประกอบของ Next.js

useEffect hook เป็นเครื่องมือที่มีประโยชน์ที่จะช่วยให้คุณจัดการส่วนประกอบของคุณได้อย่างมีประสิทธิภาพ

สิ่งนี้ช่วยให้คุณสร้างแอปพลิเคชันที่ตอบสนองและมีประสิทธิภาพ

ความแตกต่างระหว่าง useEffect และ componentDidMount/componentDidUpdate

useEffect hook เหมือนกับ componentDidMount และ componentDidUpdate ใน React Class Component

อย่างไรก็ตาม useEffect hook มีประสิทธิภาพมากกว่าและสามารถกำหนดค่าได้มากกว่า

useEffect hook ช่วยให้คุณสามารถระบุเงื่อนไขที่ effect ควรถูกเรียกใช้ และยังสามารถกำหนดค่า effect ให้เป็น side effect ได้

โดยปกติแล้ว คุณควรใช้ useEffect hook แทน componentDidMount และ componentDidUpdate