feat: enhance various components with useCallback for performance optimization and improve chunk size warning limit in Vite config

2026-03-16 00:07:25 +07:00
parent 972f3ab5ca
commit 50a7edd50f
25 changed files with 360 additions and 364 deletions
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import api from './lib/api.js';
 import { 
  IconPlus, 
@@ -39,11 +39,7 @@ function DataManager({ entityName, entityKey, placeholder }) {
  const pageSize = 10;
  const [confirmState, setConfirmState] = useState({ open: false, text: '', onConfirm: null });

-  useEffect(() => {
-    fetchItems();
-  }, [entityKey]);
-
-  const fetchItems = async () => {
+  const fetchItems = useCallback(async () => {
    setLoading(true);
    try {
      const response = await api.get(`/${entityKey}`);
@@ -55,7 +51,11 @@ function DataManager({ entityName, entityKey, placeholder }) {
    } finally {
      setLoading(false);
    }
-  };
+  }, [entityKey, entityName]);
+
+  useEffect(() => {
+    fetchItems();
+  }, [fetchItems]);

  const handleAddItem = () => {
    if (newItem.domain.trim() === '') {