Kiedy używać API imperatywnych, a kiedy deklaratywnych

React zachęca do stylu deklaratywnego: opisuje się, jak interfejs powinien wyglądać dla danego stanu, a React uzgadnia DOM z tym opisem. Większość zachowania przepływa przez propsy i stan, a nie przez bezpośrednie polecenia dla DOM.

Ten model sprawia, że interfejsy są przewidywalne, ponieważ wyrenderowany wynik jest czystą funkcją stanu, a nie rezultatem sekwencji ręcznych mutacji.

Niektóre interakcje trudno wyrazić wyłącznie deklaratywnie. Imperatywne ustawienie fokusu elementu, uruchomienie animacji w dokładnie określonym momencie czy sterowanie widżetem DOM zewnętrznej biblioteki często nie daje się dobrze opisać jako funkcja stanu.

W takich przypadkach React udostępnia furtki awaryjne, takie jak refy i uchwyty imperatywne, których należy używać oszczędnie, gdy deklaratywne propsy nie wystarczają.

Imperatywne API wiąże się z kompromisami. Trudniej je testować, ponieważ trzeba wywoływać metody i obserwować efekty uboczne, a ponadto może ono zaburzać jednokierunkowy przepływ danych, który ułatwia śledzenie działania aplikacji React.

Wywołania imperatywne mają również tendencję do rozpraszania logiki w procedurach obsługi zdarzeń zamiast skupiania jej w przejrzystym odwzorowaniu stanu na interfejs, co zwiększa koszt utrzymania.

Należy preferować deklaratywne API, a po imperatywne sięgać tylko w przypadku interakcji i pomiarów: ustawiania fokusu, przewijania, animacji, odtwarzania multimediów oraz odczytywania rozmiarów lub pozycji.

Jeśli coś można zamodelować jako stan odwzorowywany na wyrenderowany wynik, należy tak zrobić. Jeśli jest to chwilowe działanie bez czytelnej reprezentacji w stanie, odpowiedni będzie uchwyt imperatywny.

Deklaratywny modal renderuje się na podstawie propsa isOpen, którym zarządza komponent nadrzędny, więc widoczność zależy od stanu. Imperatywny modal udostępnia metody open i close, ukrywając własny stan za uchwytem.

Wersja deklaratywna lepiej pasuje do przepływu danych React i zwykle jest preferowana, natomiast wersja imperatywna może być wygodna, gdy wyzwalanie musi następować w rozproszonym kodzie sterowanym zdarzeniami.

Formularz można zresetować deklaratywnie, zmieniając jego props key, co zmusza React do ponownego zamontowania go od początku ze stanem domyślnym. Nie jest wymagane żadne wywołanie imperatywne.

Alternatywa imperatywna udostępnia metodę reset na uchwycie. Sposób z key jest często czystszy, ponieważ opiera się na uzgadnianiu React zamiast na ręcznym czyszczeniu stanu.

Router Next.js udostępnia imperatywne metody, takie jak push, replace i prefetch. Prefetchowanie trasy przed prawdopodobną nawigacją jest działaniem, a nie elementem stanu renderowania, więc wywołanie imperatywne pasuje tu naturalnie.

Pokazuje to, że nawet idiomatyczne narzędzia React korzystają z imperatywnych API, gdy dana operacja jest z natury działaniem wyzwalanym w określonym momencie.

Oficjalne zalecenia przedstawiają refy i uchwyty imperatywne jako furtki awaryjne, czyli narzędzia pozwalające wyjść poza model deklaratywny, gdy jest to rzeczywiście konieczne. Nie są one domyślnym sposobem budowania funkcji.

Takie podejście zapobiega nadużywaniu tych mechanizmów: po furtkę awaryjną należy sięgać dopiero po potwierdzeniu, że propsy i stan nie pozwalają czysto wyrazić danego zachowania.

Przed dodaniem uchwytu imperatywnego należy zapytać: czy można to przedstawić jako stan odwzorowany na interfejs? Jeśli tak, należy pozostać przy podejściu deklaratywnym. Czy chodzi o fokus, przewijanie, pomiar, animację lub działanie zewnętrznej biblioteki? Jeśli tak, podejście imperatywne może być uzasadnione.

Należy również upewnić się, że powierzchnia API jest niewielka i udokumentowana oraz że ref nie służy wyłącznie do przekazywania danych, które mógłby przenosić props.

Rzeczywiste aplikacje łączą oba podejścia. Zdecydowana większość logiki pozostaje deklaratywna, a cienka warstwa uchwytów imperatywnych obsługuje niewielką liczbę interakcji, które ich wymagają.

Zachowanie tej równowagi sprawia, że kod pozostaje przewidywalny i łatwy do testowania, a jednocześnie pozwala obsługiwać zarządzanie fokusem, sterowanie multimediami i integrację z bibliotekami tam, gdzie kod deklaratywny nie wystarcza.

Wybierz sytuacje, w których imperatywne API jest właściwym narzędziem.

React domyślnie używa deklaratywnego interfejsu sterowanego przez propsy i stan, który jest przewidywalny i łatwy do testowania. Uchwyty imperatywne są furtkami awaryjnymi przy obsłudze fokusu, przewijania, animacji, pomiarów i zewnętrznego sterowania DOM.

Należy porównać deklaratywne i imperatywne modale, preferować props key przy resetowaniu formularzy oraz pamiętać, że nawet router Next.js używa metod imperatywnych do wykonywania działań. Warstwa imperatywna powinna być niewielka, udokumentowana i uzasadniona.