M

MLOG

Nederlands

Leer hoe je React custom hooks kunt gebruiken om componentlogica te extraheren en te hergebruiken, waardoor de onderhoudbaarheid, testbaarheid en algemene applicatie-architectuur worden verbeterd.

React Custom Hooks: Component Logica Extraheren voor Herbruikbaarheid

React hooks hebben een revolutie teweeggebracht in de manier waarop we React componenten schrijven, en bieden een elegantere en efficiëntere manier om state en side effects te beheren. Van de verschillende beschikbare hooks, springen custom hooks eruit als een krachtig hulpmiddel voor het extraheren en hergebruiken van componentlogica. Dit artikel biedt een uitgebreide handleiding voor het begrijpen en implementeren van React custom hooks, zodat je meer onderhoudbare, testbare en schaalbare applicaties kunt bouwen.

Wat zijn React Custom Hooks?

In wezen is een custom hook een JavaScript-functie waarvan de naam begint met "use" en die andere hooks kan aanroepen. Hiermee kun je componentlogica extraheren naar herbruikbare functies, waardoor code-duplicatie wordt geëlimineerd en een schonere componentstructuur wordt bevorderd. In tegenstelling tot reguliere React componenten, renderen custom hooks geen UI; ze kapselen simpelweg logica in.

Beschouw ze als herbruikbare functies die toegang hebben tot React state en lifecycle functies. Ze zijn een fantastische manier om stateful logica te delen tussen verschillende componenten zonder terug te hoeven vallen op higher-order components of render props, wat vaak kan leiden tot code die moeilijk te lezen en te onderhouden is.

Waarom Custom Hooks Gebruiken?

De voordelen van het gebruik van custom hooks zijn talrijk:

Je Eerste Custom Hook Maken

Laten we de creatie en het gebruik van een custom hook illustreren met een praktisch voorbeeld: het ophalen van gegevens van een API.

Voorbeeld: useFetch - Een Data Fetching Hook

Stel je voor dat je vaak gegevens van verschillende API's in je React-applicatie moet ophalen. In plaats van de fetch-logica in elk component te herhalen, kun je een useFetch hook maken.


import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const abortController = new AbortController();
    const signal = abortController.signal;

    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url, { signal: signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setError(null); // Clear any previous errors
      } catch (error) {
        if (error.name === 'AbortError') {
          console.log('Fetch aborted');
        } else {
          setError(error);
        }
        setData(null); // Clear any previous data
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
    };
  }, [url]); // Re-run effect when the URL changes

  return { data, loading, error };
}

export default useFetch;

Uitleg:

De useFetch Hook Gebruiken in een Component

Laten we nu eens kijken hoe we deze custom hook in een React-component kunnen gebruiken:


import React from 'react';
import useFetch from './useFetch';

function UserList() {
  const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');

  if (loading) return <p>Loading users...</p>;
  if (error) return <p>Error: {error.message}</p>;
  if (!users) return <p>No users found.</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} ({user.email})</li>
      ))}
    </ul>
  );
}

export default UserList;

Uitleg:

Geavanceerde Custom Hook Patronen

Naast het eenvoudig ophalen van gegevens, kunnen custom hooks worden gebruikt om complexere logica in te kapselen. Hier zijn een paar geavanceerde patronen:

1. State Management met useReducer

Voor complexere state management scenario's kun je custom hooks combineren met useReducer. Hierdoor kun je statustransities op een meer voorspelbare en georganiseerde manier beheren.


import { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function useCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement' });

  return { count: state.count, increment, decrement };
}

export default useCounter;

Gebruik:


import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

2. Context Integratie met useContext

Custom hooks kunnen ook worden gebruikt om de toegang tot React Context te vereenvoudigen. In plaats van useContext rechtstreeks in je componenten te gebruiken, kun je een custom hook maken die de contexttoegangslogica inkapselt.


import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext

function useTheme() {
  return useContext(ThemeContext);
}

export default useTheme;

Gebruik:


import React from 'react';
import useTheme from './useTheme';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{ backgroundColor: theme.background, color: theme.color }}>
      <p>This is my component.</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
}

export default MyComponent;

3. Debouncing en Throttling

Debouncing en throttling zijn technieken die worden gebruikt om de snelheid te regelen waarmee een functie wordt uitgevoerd. Custom hooks kunnen worden gebruikt om deze logica in te kapselen, waardoor het gemakkelijk wordt om deze technieken toe te passen op event handlers.


import { useState, useEffect, useRef } 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;

Gebruik:


import React, { useState } from 'react';
import useDebounce from './useDebounce';

function SearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms

  useEffect(() => {
    // Perform search with debouncedSearchValue
    console.log('Searching for:', debouncedSearchValue);
    // Replace console.log with your actual search logic
  }, [debouncedSearchValue]);

  const handleChange = (event) => {
    setSearchValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={searchValue}
      onChange={handleChange}
      placeholder="Search..."
    />
  );
}

export default SearchInput;

Best Practices voor het Schrijven van Custom Hooks

Om ervoor te zorgen dat je custom hooks effectief en onderhoudbaar zijn, volg je deze best practices:

Globale Overwegingen

Houd bij het ontwikkelen van applicaties voor een wereldwijd publiek het volgende in gedachten:

Voorbeeld: Geïnternationaliseerde Datumformattering met een Custom Hook


import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';

function useFormattedDate(date, locale) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    try {
      const formatter = new DateTimeFormat(locale, {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
      });
      setFormattedDate(formatter.format(date));
    } catch (error) {
      console.error('Error formatting date:', error);
      setFormattedDate('Invalid Date');
    }
  }, [date, locale]);

  return formattedDate;
}

export default useFormattedDate;

Gebruik:


import React from 'react';
import useFormattedDate from './useFormattedDate';

function MyComponent() {
  const today = new Date();
  const enDate = useFormattedDate(today, 'en-US');
  const frDate = useFormattedDate(today, 'fr-FR');
  const deDate = useFormattedDate(today, 'de-DE');

  return (
    <div>
      <p>US Date: {enDate}</p>
      <p>French Date: {frDate}</p>
      <p>German Date: {deDate}</p>
    </div>
  );
}

export default MyComponent;

Conclusie

React custom hooks zijn een krachtig mechanisme voor het extraheren en hergebruiken van componentlogica. Door gebruik te maken van custom hooks, kun je schonere, meer onderhoudbare en testbare code schrijven. Naarmate je meer bedreven wordt met React, zal het beheersen van custom hooks je vermogen om complexe en schaalbare applicaties te bouwen aanzienlijk verbeteren. Vergeet niet om best practices te volgen en globale factoren in overweging te nemen bij het ontwikkelen van custom hooks om ervoor te zorgen dat ze effectief en toegankelijk zijn voor een divers publiek. Omarm de kracht van custom hooks en verbeter je React-ontwikkelingsvaardigheden!