⭐任務說明

😸今天學習使用 useCallback

useCallback 是什麼

• 用來記憶函數，以避免該函數被重新渲染

如何使用

const cachedFn = useCallback(fn, dependencies)

試試看

import { useState, useCallback } from "react";

export default function ParentComponent() {
  const [count, setCount] = useState(0);

  // 使用 useCallback 記憶 handleClick 函数
  const handleClick = useCallback(() => {
    alert("看訊息");
  }, []); // 此項目為空，只會被渲染一次

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>點我</button>;
}

• 這邊使用 useCallback 函數，紀錄一個 alert 訊息
• handleClick 第一個參數是函數、第二個參數為空時，表示在元件只會在初始化時渲染一次，
• 當使用者點了增加功能鍵，則會觸發 setCount 函式，讓 count + 1，並且會重新渲染

結語

今天學會了嗎？下個任務見囉！