React挂钩useCallback和备注列表重新呈现

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

const MemoList = () => {
  const [memos, setMemos] = useState(['Memo 1', 'Memo 2', 'Memo 3']);

  const handleDelete = useCallback((index) => {
    setMemos((prevMemos) => {
      const newMemos = [...prevMemos];
      newMemos.splice(index, 1);
      return newMemos;
    });
  }, []);

  return (
    <div>
      <h1>Memo List</h1>
      {memos.map((memo, index) => (
        <div key={index}>
          <span>{memo}</span>
          <button onClick={() => handleDelete(index)}>Delete</button>
        </div>
      ))}
    </div>
  );
};

export default MemoList;