feat: new article about usedebounce

Author: OlivierCo

apps/www/posts/building-better-counters-deep-dive-into-the-usecounter-hook.mdx

@@ -2,7 +2,7 @@
 title: "Building Better Counters: A Deep Dive into the useCounter Hook"
 date: "2025-07-14"
 description: "Explore the useCounter hook - a simple yet powerful React hook for managing counter state with increment, decrement, reset, and set operations."
-author: "Olivier Colonna"
+author: "usehooks.io"
 tags: ["react", "hooks", "state-management", "counter", "tutorial"]
 featured: true
 ---

apps/www/posts/mastering-client-side-storage-the-useindexeddb-hook.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Mastering Client-Side Storage: The useIndexedDB Hook"
 date: "2025-07-24"
-author: "Olivier Colonna"
+author: "usehooks.io"
 description: "Unlock the power of IndexedDB in React with the useIndexedDB hook - featuring automatic database management, transaction handling, and seamless state synchronization for large-scale data storage."
 tags: ["use-indexed-db", "state", "storage", "indexeddb", "database"]
 featured: true

apps/www/posts/mastering-persistent-state-the-uselocalstorage-hook.mdx

@@ -1,7 +1,7 @@
 ---
 title: "Mastering Persistent State: The useLocalStorage Hook"
 date: "2025-07-16"
-author: "Olivier Colonna"
+author: "usehooks.io"
 description: "Learn how to seamlessly persist React state with the useLocalStorage hook - featuring automatic JSON serialization, error handling, and functional updates."
 tags: ["use-local-storage", "state", "persistence", "localStorage"]
 featured: true

apps/www/posts/optimizing-performance-with-the-usedebounce-hook.mdx

@@ -0,0 +1,336 @@
+---
+title: "Optimizing Performance with the useDebounce Hook"
+date: "2025-08-02"
+author: "usehooks.io"
+description: "Learn how to optimize React performance and reduce unnecessary API calls with the useDebounce hook - perfect for search inputs, form validation, and real-time updates."
+tags: ["use-debounce", "performance", "optimization", "utility"]
+featured: true
+---
+
+In modern web applications, users expect instant feedback and real-time interactions. However, responding to every keystroke or rapid state change can lead to performance issues and excessive API calls. The [useDebounce](/docs/use-debounce) hook provides an elegant solution by delaying updates until after a specified period of inactivity.
+
+## What is useDebounce?
+
+The [useDebounce](/docs/use-debounce) hook is a utility React hook that delays the propagation of rapidly changing values. It's particularly useful for scenarios where you want to wait for a user to "finish" an action before triggering expensive operations like API calls, complex calculations, or DOM updates.
+
+## Key Features
+
+### ⏱️ Configurable Delay
+
+Set any delay period in milliseconds to control how long the hook waits before updating the debounced value.
+
+### 🎯 Type Safe
+
+Built with TypeScript generics, supporting any data type while maintaining full type safety.
+
+### 🚀 Performance Optimized
+
+Prevents excessive function calls and API requests, significantly improving application performance.
+
+### 🔄 Automatic Cleanup
+
+Handles timer cleanup automatically, preventing memory leaks and ensuring proper component unmounting.
+
+### 📦 Lightweight
+
+Minimal implementation with no external dependencies, adding virtually no bundle size.
+
+## The Implementation
+
+Let's examine how this hook works under the hood:
+
+```typescript
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+```
+
+The implementation is elegantly simple:
+
+1. **State Management**: Uses `useState` to maintain the debounced value
+2. **Timer Logic**: `useEffect` sets up a timeout that updates the debounced value after the specified delay
+3. **Cleanup**: Returns a cleanup function that clears the timeout, preventing memory leaks
+4. **Dependency Array**: Re-runs the effect when either `value` or `delay` changes
+
+## Common Use Cases
+
+### Search Input Optimization
+
+One of the most common use cases is debouncing search inputs to avoid making API calls on every keystroke:
+
+```tsx
+import { useState, useEffect } from "react";
+import { useDebounce } from "@usehooks-io/hooks";
+
+function SearchComponent() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const [results, setResults] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  // Effect runs only when debounced value changes
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      setLoading(true);
+      searchAPI(debouncedSearchTerm)
+        .then(setResults)
+        .finally(() => setLoading(false));
+    } else {
+      setResults([]);
+    }
+  }, [debouncedSearchTerm]);
+
+  return (
+    <div>
+      <input
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder="Search..."
+      />
+      {loading && <p>Searching...</p>}
+      <ul>
+        {results.map((result) => (
+          <li key={result.id}>{result.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+```
+
+### Form Validation
+
+Debounce form validation to provide real-time feedback without overwhelming the user:
+
+```tsx
+import { useState, useEffect } from "react";
+import { useDebounce } from "@usehooks-io/hooks";
+
+function EmailValidation() {
+  const [email, setEmail] = useState("");
+  const [isValid, setIsValid] = useState(null);
+  const debouncedEmail = useDebounce(email, 500);
+
+  useEffect(() => {
+    if (debouncedEmail) {
+      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      setIsValid(emailRegex.test(debouncedEmail));
+    } else {
+      setIsValid(null);
+    }
+  }, [debouncedEmail]);
+
+  return (
+    <div>
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        placeholder="Enter your email"
+      />
+      {isValid === false && (
+        <p style={{ color: "red" }}>Please enter a valid email</p>
+      )}
+      {isValid === true && <p style={{ color: "green" }}>Email looks good!</p>}
+    </div>
+  );
+}
+```
+
+### API Call Optimization
+
+Prevent excessive API calls during rapid state changes:
+
+```tsx
+import { useState, useEffect } from "react";
+import { useDebounce } from "@usehooks-io/hooks";
+
+function ProductFilters() {
+  const [filters, setFilters] = useState({
+    category: "",
+    minPrice: 0,
+    maxPrice: 1000,
+  });
+  const debouncedFilters = useDebounce(filters, 500);
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    // API call only happens after user stops changing filters
+    fetchProducts(debouncedFilters).then(setProducts);
+  }, [debouncedFilters]);
+
+  const updateFilter = (key: string, value: any) => {
+    setFilters((prev) => ({ ...prev, [key]: value }));
+  };
+
+  return (
+    <div>
+      <select
+        value={filters.category}
+        onChange={(e) => updateFilter("category", e.target.value)}
+      >
+        <option value="">All Categories</option>
+        <option value="electronics">Electronics</option>
+        <option value="clothing">Clothing</option>
+      </select>
+
+      <input
+        type="range"
+        min="0"
+        max="1000"
+        value={filters.maxPrice}
+        onChange={(e) => updateFilter("maxPrice", Number(e.target.value))}
+      />
+
+      <div>
+        {products.map((product) => (
+          <div key={product.id}>{product.name}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+### Window Resize Debouncing
+
+Optimize performance during window resize events:
+
+```tsx
+import { useState, useEffect } from "react";
+import { useDebounce } from "@usehooks-io/hooks";
+
+function ResponsiveComponent() {
+  const [windowSize, setWindowSize] = useState({
+    width: typeof window !== "undefined" ? window.innerWidth : 0,
+    height: typeof window !== "undefined" ? window.innerHeight : 0,
+  });
+  const debouncedWindowSize = useDebounce(windowSize, 250);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  // Use debouncedWindowSize for expensive calculations
+  useEffect(() => {
+    console.log("Performing expensive layout calculation...");
+    // Expensive operations only run after resize stops
+    performExpensiveLayout(debouncedWindowSize);
+  }, [debouncedWindowSize]);
+
+  return (
+    <div>
+      <p>
+        Window size: {debouncedWindowSize.width} x {debouncedWindowSize.height}
+      </p>
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+### Choose the Right Delay
+
+- **Search inputs**: 300-500ms provides good balance between responsiveness and performance
+- **Form validation**: 500-1000ms gives users time to finish typing
+- **API calls**: 300-800ms depending on your API response time
+- **Resize events**: 100-250ms for smooth visual updates
+
+### Consider User Experience
+
+```tsx
+function SearchWithLoading() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  useEffect(() => {
+    if (searchTerm !== debouncedSearchTerm) {
+      setIsTyping(true);
+    } else {
+      setIsTyping(false);
+    }
+  }, [searchTerm, debouncedSearchTerm]);
+
+  return (
+    <div>
+      <input
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder="Search..."
+      />
+      {isTyping && <span>Typing...</span>}
+    </div>
+  );
+}
+```
+
+### Combine with Other Hooks
+
+The useDebounce hook works great with other hooks:
+
+```tsx
+import { useDebounce, useLocalStorage } from "@usehooks-io/hooks";
+
+function PersistentSearch() {
+  const [searchTerm, setSearchTerm] = useLocalStorage("searchTerm", "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  // Search term is automatically persisted and debounced
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      performSearch(debouncedSearchTerm);
+    }
+  }, [debouncedSearchTerm]);
+
+  return (
+    <input
+      value={searchTerm}
+      onChange={(e) => setSearchTerm(e.target.value)}
+      placeholder="Search (persisted)..."
+    />
+  );
+}
+```
+
+## Performance Benefits
+
+The useDebounce hook can significantly improve your application's performance:
+
+- **Reduced API Calls**: A search input that makes API calls on every keystroke could generate 10+ requests for a single word. With debouncing, this becomes just 1 request.
+- **Lower Server Load**: Fewer requests mean less server load and reduced costs.
+- **Better User Experience**: Prevents UI flickering and provides smoother interactions.
+- **Improved Battery Life**: Fewer operations mean better performance on mobile devices.
+
+## Conclusion
+
+The useDebounce hook is a simple yet powerful tool for optimizing React applications. By delaying updates until after a period of inactivity, it helps reduce unnecessary operations, improve performance, and create better user experiences.
+
+Whether you're building search functionality, form validation, or handling rapid state changes, useDebounce provides an elegant solution that's easy to implement and highly effective.
+
+Try incorporating useDebounce into your next React project and experience the performance benefits firsthand!

apps/www/posts/streamlining-react-development-with-usehooks-cli.mdx

@@ -2,7 +2,7 @@
 title: "Building Better React Apps: A Hands-on Guide to usehooks-cli"
 date: "2025-07-16"
 description: "Learn how to supercharge your React development workflow with usehooks-cli through this practical, step-by-step tutorial."
-author: "Olivier Colonna"
+author: "usehooks.io"
 tags: ["react", "hooks", "cli", "tutorial", "productivity"]
 featured: true
 ---

apps/www/posts/the-ultimate-react-array-management-hook.mdx

@@ -1,7 +1,7 @@
 ---
 title: "The Ultimate React Array Management Hook: useArray"
 date: "2025-07-14"
-author: "Olivier Colonna"
+author: "usehooks.io"
 description: "A comprehensive React hook that provides helper methods for working with array state, including all common array operations optimized with useCallback for performance."
 tags: ["use-array", "state", "operations"]
 ---

apps/www/posts/use-closure-a-comprehensive-guide.mdx

@@ -2,7 +2,7 @@
 title: "useClosure: A Comprehensive Guide"
 date: "2025-07-20"
 description: "Learn how to use the useClosure hook - a powerful React utility for creating and working with JavaScript closures, providing utilities for private state management, memoization, and encapsulation patterns."
-author: "Olivier Colonna"
+author: "usehooks.io"
 tags:
   ["react", "hooks", "utility", "useClosure", "tutorial", "guide", "closures"]
 featured: true

apps/www/posts/use-proxy-a-comprehensive-guide.mdx

@@ -2,7 +2,7 @@
 title: "useProxy: A Comprehensive Guide"
 date: "2025-07-17"
 description: "Learn how to use the useProxy hook - a powerful React utility for creating Proxy objects that enable interception and customization of object operations, perfect for implementing reactive objects and data transformations."
-author: "Olivier Colonna"
+author: "usehooks.io"
 tags: ["react", "hooks", "state-management", "useProxy", "tutorial", "guide"]
 featured: true
 ---