Introduction: React hooks have revolutionized the way developers manage stateful logic in functional components. While the React library provides built-in hooks like useState and useEffect, custom hooks empower developers to create reusable and modular pieces of logic. In this article, we will explore four custom React hooks that every developer should be familiar with to enhance their productivity and code maintainability.

useLocalStorage: Persistent State Management

import { useState } from 'react';

function useLocalStorage(key, initialValue) { const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initialValue; } catch (error) { console.error("Error retrieving data from localStorage:", error); return initialValue; } });

const setValue = value => { try { const valueToStore = value instanceof Function ? value(storedValue) : value; setStoredValue(valueToStore); window.localStorage.setItem(key, JSON.stringify(valueToStore)); } catch (error) { console.error("Error storing data in localStorage:", error); } };

return [storedValue, setValue]; }

Explanation:

The useLocalStorage hook allows you to easily manage state that persists across page reloads using the browser's local storage. It provides a familiar useState interface while handling the serialization and deserialization of data to and from local storage.

useDebounce: Optimize Expensive Operations

import { useState, useEffect } from 'react';

function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value);

useEffect(() => { const timeoutId = setTimeout(() => { setDebouncedValue(value); }, delay);

return () => { clearTimeout(timeoutId); }; }, [value, delay]);

return debouncedValue; }

Explanation:

The useDebounce hook is handy when dealing with input or search fields, preventing unnecessary API calls or expensive operations by delaying the execution until the user has stopped typing.

useMediaQuery: Responsive Design Made Easy

import { useState, useEffect } from 'react';

function useMediaQuery(query) { const [matches, setMatches] = useState(() => window.matchMedia(query).matches);

useEffect(() => { const mediaQueryList = window.matchMedia(query); const handler = event => setMatches(event.matches);

mediaQueryList.addListener(handler);

return () => { mediaQueryList.removeListener(handler); }; }, [query]);

return matches; }

Explanation:

With the useMediaQuery hook, you can effortlessly adapt your components based on the user's device or screen size, creating a more responsive user interface.

usePrevious: Track Previous State

import { useEffect, useRef } from 'react';

function usePrevious(value) { const prevValueRef = useRef();

useEffect(() => { prevValueRef.current = value; }, [value]);

return prevValueRef.current; }

Explanation:

The usePrevious hook is a simple utility that helps you track the previous state or prop value, which can be useful in scenarios like comparing previous and current values to determine if a component needs to re-render.

Conclusion:

By incorporating these custom React hooks into your toolkit, you can streamline common tasks, enhance code reusability, and build more efficient and responsive React applications. Experiment with these hooks and explore how they can improve your development workflow.