feat: add rules to avoid useEffect and prefer direct useCallback approaches

Co-authored-by: astandrik <[email protected]>

Author: Copilot

.github/copilot-instructions.md

@@ -24,6 +24,8 @@ This is a React-based monitoring and management interface for YDB clusters. The
 - **ALWAYS** use `useMemo` for expensive computations, object/array creation
 - **ALWAYS** use `useCallback` for functions in effect dependencies
 - **ALWAYS** memoize table columns, filtered data, computed values
+- **AVOID** `useEffect` when possible - prefer direct approaches with `useCallback`
+- **PREFER** direct event handlers and callbacks over useEffect for user interactions
 
 ```typescript
 // ✅ REQUIRED patterns
@@ -33,6 +35,17 @@ const displaySegments = useMemo(() =>
 const handleClick = useCallback(() => {
   // logic
 }, [dependency]);
+
+// ✅ PREFER direct callbacks over useEffect
+const handleInputChange = useCallback((value: string) => {
+  setSearchTerm(value);
+  onSearchChange?.(value);
+}, [onSearchChange]);
+
+// ❌ AVOID unnecessary useEffect
+// useEffect(() => {
+//   onSearchChange?.(searchTerm);
+// }, [searchTerm, onSearchChange]);
 ```
 
 ### Memory & Display Safety

AGENTS.md

@@ -104,6 +104,8 @@ src/
 - **ALWAYS** use `useMemo` for expensive computations and object/array creation
 - **ALWAYS** use `useCallback` for functions passed to dependencies
 - **ALWAYS** memoize table columns, filtered data, and computed values
+- **AVOID** `useEffect` when possible - prefer direct approaches with `useCallback`
+- **PREFER** direct event handlers and callbacks over useEffect for user interactions
 
 ```typescript
 // ✅ REQUIRED patterns
@@ -113,6 +115,17 @@ const displaySegments = useMemo(() =>
 const handleClick = useCallback(() => {
   // logic
 }, [dependency]);
+
+// ✅ PREFER direct callbacks over useEffect
+const handleInputChange = useCallback((value: string) => {
+  setSearchTerm(value);
+  onSearchChange?.(value);
+}, [onSearchChange]);
+
+// ❌ AVOID unnecessary useEffect
+// useEffect(() => {
+//   onSearchChange?.(searchTerm);
+// }, [searchTerm, onSearchChange]);
 ```
 
 ### Display Safety

CLAUDE.md

@@ -104,6 +104,8 @@ src/
 - **ALWAYS** use `useMemo` for expensive computations and object/array creation
 - **ALWAYS** use `useCallback` for functions passed to dependencies
 - **ALWAYS** memoize table columns, filtered data, and computed values
+- **AVOID** `useEffect` when possible - prefer direct approaches with `useCallback`
+- **PREFER** direct event handlers and callbacks over useEffect for user interactions
 
 ```typescript
 // ✅ REQUIRED patterns
@@ -113,6 +115,17 @@ const displaySegments = useMemo(() =>
 const handleClick = useCallback(() => {
   // logic
 }, [dependency]);
+
+// ✅ PREFER direct callbacks over useEffect
+const handleInputChange = useCallback((value: string) => {
+  setSearchTerm(value);
+  onSearchChange?.(value);
+}, [onSearchChange]);
+
+// ❌ AVOID unnecessary useEffect
+// useEffect(() => {
+//   onSearchChange?.(searchTerm);
+// }, [searchTerm, onSearchChange]);
 ```
 
 ### Display Safety