React Hooks: Najlepsze praktyki i częste pułapki

React Hooks zrewolucjonizowały sposób pisania komponentów React, ale z wielką mocą wiąże się wielka odpowiedzialność. Przyjrzyjmy się najlepszym praktykom i częstym pułapkom podczas pracy z hooks.

1. Zawsze używaj Hooks na najwyższym poziomie

Nigdy nie wywołuj hooks wewnątrz pętli, warunków lub zagnieżdżonych funkcji. To zapewnia, że hooks są wywoływane w tej samej kolejności za każdym razem, gdy komponent się renderuje.

// ❌ Źle
function MyComponent({ condition }) {
  if (condition) {
    const [state, setState] = useState(false);
  }
  return <div>...</div>;
}

// ✅ Dobrze
function MyComponent({ condition }) {
  const [state, setState] = useState(false);
  
  if (condition) {
    // Użyj state tutaj
  }
  return <div>...</div>;
}

2. Optymalizuj zależności useEffect

Zawsze uwzględniaj wszystkie wartości z zakresu komponentu, które są używane wewnątrz useEffect w tablicy zależności.

// ❌ Źle - brakuje zależności
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // Brakuje zależności userId
  
  return <div>{user?.name}</div>;
}

// ✅ Dobrze
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // Uwzględnij userId
  
  return <div>{user?.name}</div>;
}

3. Używaj useCallback i useMemo mądrze

Nie nadużywaj tych hooks optymalizacyjnych. Używaj ich tylko wtedy, gdy masz udowodniony problem z wydajnością.

// ❌ Niepotrzebna optymalizacja
function ExpensiveComponent({ items }) {
  const memoizedValue = useMemo(() => items.length, [items]);
  return <div>{memoizedValue}</div>;
}

// ✅ Sensowna optymalizacja
function ExpensiveComponent({ items }) {
  const expensiveValue = useMemo(() => {
    return items.reduce((acc, item) => {
      // Kosztowne obliczenie
      return acc + complexCalculation(item);
    }, 0);
  }, [items]);
  
  return <div>{expensiveValue}</div>;
}

4. Niestandardowe Hooks dla logiki wielokrotnego użytku

Wyodrębnij złożoną logikę stanową do niestandardowych hooks dla lepszej możliwości ponownego użycia i testowania.

// Niestandardowy hook
function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
}

// Użycie
function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  return <div>Aktualny motyw: {theme}</div>;
}

Podsumowanie

React Hooks to potężne narzędzia, które mogą uczynić Twój kod bardziej czytelnym i łatwiejszym w utrzymaniu, gdy są używane prawidłowo. Pamiętaj o przestrzeganiu zasad hooks, optymalizuj przemyślanie i wyodrębniaj logikę wielokrotnego użytku do niestandardowych hooks.