Previous

React Custom Hooks

  • Custom hooks are reusable functions in React that encapsulate logic and state management, allowing you to share functionality across components.

Purpose

  • Reusability: Custom hooks enable the extraction of logic from components, making it reusable across multiple components.
  • Maintainability: Logic encapsulated in custom hooks can be maintained independently of specific components.
  • Abstraction: Abstract complex logic into custom hooks to keep component code clean and focused.

Syntax

  • To create a custom hook, create a function that uses existing React hooks and returns necessary values.
import { useState, useEffect } from 'react';

const useCustomHook = (initialValue) => {
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // Effect logic
    return () => {
      // Cleanup logic (if needed)
    };
  }, [/* Dependencies */]);

  // Other custom logic

  return [state, /* Other values or functions */];
};

UseLocalStorage Hook

  • A custom hook that synchronizes state with local storage.
import { useState, useEffect } from 'react';

const useLocalStorage = (key, initialValue) => {
  const storedValue = localStorage.getItem(key);
  const initial = storedValue ? JSON.parse(storedValue) : initialValue;
  const [value, setValue] = useState(initial);

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
};

Usage

const [storedValue, setStoredValue] = useLocalStorage('myKey', 'defaultValue');

useToggle Hook

  • A custom hook for handling toggle state.
import { useState } from 'react';

const useToggle = (initialState = false) => {
  const [isToggled, setIsToggled] = useState(initialState);

  const toggle = () => {
    setIsToggled((prev) => !prev);
  };

  return [isToggled, toggle];
};

Usage

const [isOn, toggleSwitch] = useToggle(false);

UseMediaQuery Hook

  • A custom hook to detect the screen size with a media query.
import { useState, useEffect } from 'react';

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

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

    mediaQueryList.addListener(handleMediaQueryChange);

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

  return matches;
};

Usage

const isMobile = useMediaQuery('(max-width: 600px)');

 

Summary

Custom hooks provide a powerful way to encapsulate and share logic across different parts of your React application. By creating custom hooks, you can abstract away complex behavior and make your components more focused and maintainable.

Previous