W 2019 roku React wprowadził funkcjonalność, która fundamentalnie zmieniła sposób pisania aplikacji – React Hooks. Ta innowacja pozwoliła functional components na korzystanie ze state i lifecycle methods, które wcześniej były dostępne wyłącznie w class components. Hooks nie tylko uprościły kod, ale też otworzyły drzwi do nowych wzorców projektowych, lepszej reużywalności logiki i bardziej czytelnych komponentów. Dla deweloperów pracujących z React, zrozumienie Hooks jest już nie opcją, ale koniecznością – większość nowoczesnych bibliotek, tutoriali i projektów opiera się na tym podejściu. Hooks transformowały React z frameworka wymagającego głębokiego zrozumienia klas i this binding, w elegancki, funkcyjny sposób budowania interfejsów użytkownika.
Jak działają React Hooks?
React Hooks to funkcje specjalne umożliwiające „wpięcie się” w mechanizmy React z poziomu functional components. Przed Hooks, state management i lifecycle methods wymagały class components z ich skomplikowaną składnią, this binding i często mylącą logiką rozproszzoną między różnymi lifecycle methods. Hooks rozwiązują te problemy, oferując prosty, funkcyjny API.
Fundamentalna zasada Hooks to ich wywołanie na najwyższym poziomie komponentu, nigdy wewnątrz pętli, warunków czy zagnieżdżonych funkcji. To pozwala React na prawidłowe śledzenie stanu między re-renderami. React polega na kolejności wywołań Hooks – każdy render musi wywoływać te same Hooks w tej samej kolejności. Ta deterministyczna natura pozwala React na mapowanie wartości state do odpowiednich Hook calls.
Pod maską, React utrzymuje linked list Hook objects dla każdego komponentu. Podczas pierwszego rendera, Hooks tworzą entries w tej liście. Przy kolejnych renderach, React używa kolejności wywołań do dopasowania Hook calls do istniejących entries. To wyjaśnia dlaczego conditional Hooks są zabronione – zmieniałyby kolejność i powodowały bugs.
useState – Zarządzanie stanem lokalnym
useState to najprostszy i najczęściej używany Hook. Pozwala dodać local state do functional component. Przyjmuje initial value i zwraca tablicę z dwoma elementami: aktualną wartością state i funkcją do jej aktualizacji.
javascript
const [count, setCount] = useState(0);W tym przykładzie, count to current state value, setCount to funkcja updater, a zero to initial state. Kliknięcie buttona wywołuje setCount, co triggeruje re-render z nową wartością. Stan może przechowywać dowolny typ – liczby, stringi, obiekty, tablice.
Ważną cechą jest, że state updates są asynchroniczne i batched. Wiele wywołań setState w tym samym event handlerze jest grupowanych dla wydajności. Jeśli nowy stan zależy od poprzedniego, należy użyć funkcyjnej formy: setCount(prev => prev + 1). To zapewnia, że pracujemy na najnowszej wartości, nawet gdy updates są batched.
Dla kompleksowych obiektów state, spread operator pozwala na immutable updates: setState({...state, newProperty: value}). Immutability jest kluczowa – React porównuje referencje do obiektów, więc mutowanie state bezpośrednio nie triggeruje re-rendera.
useEffect – Side effects i lifecycle
useEffect zastępuje componentDidMount, componentDidUpdate i componentWillUnmount w jednym API. Przyjmuje funkcję zawierającą „efektywny” kod – fetching data, subscriptions, manual DOM manipulations – oraz opcjonalną dependency array.
javascript
useEffect(() => {
document.title = `Clicked ${count} times`;
}, [count]);Effect runs po każdym renderze gdzie count się zmienił. Pusta dependency array [] oznacza effect uruchamiany tylko raz po mount, equivalent componentDidMount. Brak dependency array powoduje uruchomienie po każdym renderze.
Cleanup function zwracana z effect służy do sprzątania – unsubscribing, canceling timers, removing listeners. React wywołuje cleanup przed unmount i przed każdym kolejnym uruchomieniem effect:
javascript
useEffect(() => {
const subscription = props.source.subscribe();
return () => subscription.unsubscribe();
}, [props.source]);Separacja concerns poprzez multiple useEffect calls to best practice. Zamiast mieszać logikę w jednym lifecycle method, każdy effect obsługuje jeden concern – fetching data, updating title, managing subscriptions.
useContext – Globalny stan bez prop drilling
useContext rozwiązuje problem prop drilling – przekazywania props przez wiele poziomów komponentów tylko po to, by dotrzeć do głęboko zagnieżdżonych children. Context API pozwala udostępniać dane „globalnie” dla całego drzewa komponentów.
javascript
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button className={theme}>Themed!</button>;
}Każdy komponent wywołujący useContext otrzymuje aktualną wartość z najbliższego Provider powyżej w drzewie. Gdy wartość Provider się zmienia, wszystkie konsumujące komponenty re-renderują się z nową wartością.
Context świetnie sprawdza się dla truly global data jak theme, user authentication, locale preferences. Dla frequent updates, może powodować performance issues – każda zmiana context re-renderuje wszystkich konsumentów. Dla złożonego state management, biblioteki jak Redux czy Zustand mogą być lepsze.
useReducer – Złożony state management
useReducer to alternatywa dla useState dla bardziej złożonej logiki state. Inspirowany Redux, przyjmuje reducer function i initial state, zwracając current state i dispatch function.
javascript
const [state, dispatch] = useReducer(reducer, initialState);
function reducer(state, action) {
switch(action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
return state;
}
}Gdy state logic jest złożona z wieloma sub-values lub następny state zależy od poprzedniego, useReducer oferuje więcej kontroli i przewidywalności niż multiple useState calls. Centralizuje logikę updatów w jednym miejscu, ułatwiając testing i debugging.
Połączenie useReducer z useContext tworzy lightweight state management solution dla średnich aplikacji, eliminując potrzebę zewnętrznych bibliotek. Context dostarcza state globalnie, reducer zarządza jego updatami w przewidywalny sposób.
useRef – Referencje i mutable values
useRef zwraca mutable ref object, którego właściwość .current jest inicjalizowana przekazanym argumentem. Returned object persists for the full lifetime of the component.
javascript
const inputRef = useRef(null);
function focusInput() {
inputRef.current.focus();
}
return <input ref={inputRef} />;Główne zastosowania to accessing DOM nodes directly i storing mutable values, które nie powinny triggerować re-rendera gdy się zmieniają. W przeciwieństwie do state, aktualizacja ref nie powoduje re-rendera. To czyni ref idealnym dla storing previous values, timers, czy innych mutable data.
useRef różni się od {current: value} object tym, że useRef daje ten sam ref object przy każdym renderze, podczas gdy zwykły object byłby tworzony na nowo. Ta persistence jest kluczowa dla wielu use cases.
Dlaczego warto używać React Hooks?
Prostsza składnia i lepsza czytelność
Hooks eliminują boilerplate code związany z class components. Nie ma potrzeby constructor, this binding, czy dziwnych zachowań this w JavaScript. Functional components z Hooks są krótsze, prostsze i bardziej intuicyjne:
javascript
// Before: Class component
class Example extends React.Component {
constructor(props) {
super(props);
this.state = {count: 0};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({count: this.state.count + 1});
}
}
// After: Functional component with Hooks
function Example() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}Reużywalność logiki
Custom Hooks pozwalają ekstraktować component logic do reusable functions. Zamiast Higher Order Components czy Render Props patterns, które dodawały „wrapper hell”, custom Hooks oferują clean way to share stateful logic:
javascript
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return width;
}Ten custom Hook może być używany w dowolnym komponencie, eliminując duplikację logiki. Społeczność React stworzyła tysiące custom Hooks dla common patterns – form handling, API fetching, animations, które dramatycznie przyspieszają development.
Lepsza organizacja kodu
W class components, related code był rozproszony między różne lifecycle methods. Fetching data w componentDidMount, cleanup w componentWillUnmount – logika dla jednego feature była fragmentowana. Hooks pozwalają organizować kod według concerns, nie lifecycle phases. Wszystko związane z subscription może być w jednym useEffect, wszystko dla data fetching w innym.
Mniejszy bundle size
Functional components kompilują się do prostszego kodu niż classes. Bez class overhead, transpilation artifacts i polyfills dla class features, bundle size jest mniejszy. Dla performance-critical aplikacji, te kilobajty mają znaczenie.
FAQ – najczęstsze pytania o React Hooks
Czy muszę przepisać wszystkie class components na Hooks? Nie, Hooks są fully backward compatible. Class components będą wspierane, możesz migrować stopniowo lub wcale. Nowe komponenty warto pisać z Hooks.
Czy mogę używać Hooks w class components? Nie, Hooks działają tylko w functional components. Możesz jednak wrap class component w functional i przekazać hooked values przez props.
Dlaczego nie mogę używać Hooks warunkowo? React polega na kolejności Hook calls do mapowania state. Conditional Hooks zmieniałyby tę kolejność między renderami, powodując bugs. Conditional logic powinien być wewnątrz Hook, nie wokół niego.
Jak testować komponenty z Hooks? Testing Library (React Testing Library) świetnie współpracuje z Hooks. Testujesz komponenty jak user ich używa, nie implementation details. Dla izolowanego testowania custom Hooks, użyj @testing-library/react-hooks.
Jaka jest różnica między useMemo a useCallback? useMemo memoizuje zwracaną wartość, useCallback memoizuje samą funkcję. useCallback(fn, deps) to shortcut dla useMemo(() => fn, deps). Używaj ich do optymalizacji, nie jako domyślnego podejścia.
Czy useEffect zastępuje wszystkie lifecycle methods? Prawie wszystkie. componentDidCatch i getDerivedStateFromError nie mają Hook equivalents – error boundaries nadal wymagają class components. Wszystkie inne lifecycle methods mogą być wyrażone przez useEffect i useState.
Kiedy tworzyć custom Hook? Gdy zauważysz duplikację logiki między komponentami lub gdy logika staje się zbyt złożona i chcesz ją wyekstraktować. Jeśli używasz tego samego pattern Hooks w wielu miejscach, to sygnał do custom Hook.
Czy Hooks rozwiązują wszystkie problemy React? Nie są silver bullet. Dla bardzo złożonego state management, Redux/MobX mogą być lepsze. Dla complex animations, dedykowane biblioteki jak Framer Motion. Hooks to narzędzie, nie jedyne rozwiązanie.
Bibliografia
React Documentation. (2024). Hooks API Reference. React Official Docs. https://react.dev/reference/react
Abramov, D. (2019). Making Sense of React Hooks. Overreacted Blog. https://overreacted.io
Larsen, A., & Wieruch, R. (2021). The Road to React. Self-published.
Accomazzo, A., Murray, N., & Lerner, A. (2020). Fullstack React: The Complete Guide to ReactJS and Friends. Fullstack.io.
Kent C. Dodds. (2024). Epic React: Learn React Hooks. EpicReact.dev.
Wieruch, R. (2023). React Hooks in Action. Manning Publications.
Mozilla Developer Network. (2024). React Hooks Best Practices. MDN Web Docs.
Stack Overflow. (2024). React Hooks Survey Results. Stack Overflow Insights.
Dominik Papaj
Dominik Szulim
