debouncing added

Documentations/debouncing_in_react.md

@@ -0,0 +1,142 @@
+
+---
+title: "Debouncing in React: Optimizing Performance and User Experience"
+description: "Learn how to use debouncing in React to enhance performance and improve user interactions."
+author: "Rishit Sharma"
+date: "2024-11-27"
+---
+
+## Introduction
+
+Debouncing is like a performance booster for your React apps. It helps slow down the rate at which a function runs, making sure things don’t get too hectic. Imagine you have a search input field or a resizing event that triggers a bunch of actions. Debouncing can help you handle those things smoothly. In this guide, we’ll dive into debouncing, explore its uses, and show you how to use it in your React projects.
+
+
+## Main Content
+
+### What is Debouncing?
+
+Debouncing is like a bouncer at a club. It makes sure that a function only gets called once after a certain amount of time, even if you keep hitting the button. This way, you don’t have to worry about doing the same thing over and over again, and it saves you from having to make too many requests to the server.
+
+
+
+### Use Cases
+
+1. **Search Boxes:** Delay API calls as users type, reducing unnecessary network requests.  
+2. **Window Resize Events:** Avoid repeated computations during rapid resizing.  
+3. **Button Clicks:** Prevent multiple submissions caused by rapid user clicks.  
+
+### Implementing Debounce in React
+
+#### Using `lodash` for Debouncing
+
+The `lodash` library provides a `debounce` function that is simple to integrate.
+
+```bash
+npm install lodash
+```
+
+```javascript
+import { debounce } from 'lodash';
+import { useState, useCallback } from 'react';
+
+function SearchComponent() {
+  const [query, setQuery] = useState('');
+
+  const fetchResults = (searchTerm) => {
+    console.log('Fetching results for:', searchTerm);
+    // all API logic goes here 
+  };
+
+  const debouncedFetch = useCallback(debounce(fetchResults, 500), []);
+
+  const handleChange = (event) => {
+    setQuery(event.target.value);
+    debouncedFetch(event.target.value);
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={handleChange}
+        placeholder="Search..."
+      />
+    </div>
+  );
+}
+
+export default SearchComponent;
+```
+
+#### Using Custom Debounce Hook
+
+If you prefer a custom solution, you can create a reusable debounce hook.
+
+```javascript
+import { useState, useEffect } from 'react';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;
+```
+
+```javascript
+import useDebounce from './useDebounce';
+import { useState } from 'react';
+
+function SearchComponent() {
+  const [query, setQuery] = useState('');
+  const debouncedQuery = useDebounce(query, 500);
+
+  useEffect(() => {
+    if (debouncedQuery) {
+      console.log('Fetching results for:', debouncedQuery);
+
+    }
+  }, [debouncedQuery]);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        placeholder="Search..."
+      />
+    </div>
+  );
+}
+
+export default SearchComponent;
+```
+
+### Key Considerations
+
+1. **Delay Time:** Choose a debounce delay suitable for the context (e.g., 300-500ms for search boxes).  
+2. **Cleanup:** Always clear timers in `useEffect` or callbacks to avoid memory leaks.  
+3. **Performance:** Avoid recreating debounce functions repeatedly; use `useCallback` or hooks.  
+
+## Conclusion
+
+Debouncing is like a superhero for React applications! It makes sure your app doesn’t get overwhelmed by too many requests at once. By using debounce, you can boost performance and give your users a smoother experience.
+
+## References
+
+- [Lodash Documentation](https://lodash.com/docs)
+- [React useEffect Guide](https://reactjs.org/docs/hooks-effect.html)
+- [Debouncing vs Throttling](https://css-tricks.com/debouncing-throttling-explained-examples/)
+
+## Additional Resources
+
+- [React Performance Optimization Tips](https://reactjs.org/docs/optimizing-performance.html)