useEffectEvent zmierza do Reacta | Frontend Weekly vol. 118

1. Umarł useEvent, niech żyje useEffectEvent!

Ponad pół roku temu zespół Reacta podzielił się ze światem RFC (Request For Comments) dotyczącym nowego hooka useEvent. Miał on zwracać funkcję o stałej referencji, we wnętrzu której stan zawsze odpowiada aktualnemu stanowi komponentu. Dzięki takiemu zachowaniu możliwe miało być bardzo agresywne optymalizowanie zbędnych renderów.

function Chat() {
  const [text, setText] = useState('');

  // 🟡 A different function whenever `text` changes
  const onClick = useCallback(() => {
    sendMessage(text);
  }, [text]);

  return <SendButton onClick={onClick} />;
}

function Chat() {
  const [text, setText] = useState('');

  // ✅ Always the same function (even if `text` changes)
  const onClick = useEvent(() => {
    sendMessage(text);
  });

  return <SendButton onClick={onClick} />;
}

Niestety RFC spełniło swoją powinność i wywołało sporo zażartych dyskusji. W ich wyniku w głowach twórców nowego hooka narodziły się wątpliwości i zdecydowali się oni wstrzymać prace nad jego implementacją. Na przód wysunęły się dwa argumenty. Po pierwsze, użytkownicy mogli zinterpretować nowy hook jako lepszą wersję useCallback, a w rzeczywistości oba hooki miały pełnić trochę inne funkcje. Po drugie, równolegle do useEvent rozwijany był kompilator, który umożliwia automatyczną memonizację (więcej o nim możecie dowiedzieś się tutaj). Praca nad oboma funkcjonalnościami równocześnie byłaby po prostu zbyt uciążliwa.

Wszystkie znaki na niebie i ziemi wskazują, że useEvent za niedługo wróci do Nas w odmienionej postaci. W repozytorium Reacta pojawił się Pull Request, który zmienia jego nazwę na useEffectEvent oraz lekko zmienia jego zachowanie. Od teraz funkcja nie będzie zwracać stałej referencji, ale wciąż będzie można odwoływać się do niej z poziomu useEffect nie podając jej w liście zależności.

function Chat() {
  const [text, setText] = useState('');
  const [state, setState] = useState<State>('INITIAL');

  const onHappened = useEffectEvent(() => {
    logValueToAnalytics(text);
  });
  
  useEffect(() => {
    onHappened();
  }, [state]);

  return (/*...*/);
}

Na razie tajemniczemu Pull Requesta nie towarzyszy pełne RFC, dlatego ciężko przewidywać przyszłość `useEffectEvent` czy wysnuwać szersze wnioski na temat jego funkcjonalności. Na pewno kiedy RFC wreszcie się pojawi dostaniemy szerszy kontekst na całą sprawę i na pewno przeczytacie o tym w naszym weekly.

Źródła:

https://github.com/facebook/react/pull/25881
https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Storybook 7.0 zbliża się wielkimi krokami

Storybook 7.0 będzie pierwszym dużym wydaniem tego narzędzia od ponad dwóch lat. Zdecydowanie było na co czekać, bo opublikowana właśnie wersja beta wprowadza całą masę od dawna wyczekiwanych usprawnień i nowości. W szczegółach przyjrzymy się nowemu Storybookowi przy okazji wydania pełnej wersji początkiem roku. Wszystkich niecierplowych już teraz zapraszam jednak do obszernej notatki od twórców narzędzia do której link znajdziecie w źródłach.

Skrócona lista nowości w Storybook 7.0 beta:
💅Odświeżony design
🏎️ Poprawiona wydajność
🚥Unit Testy komponentów z wykorzystaniem Playwright
🕹️Testy interakcji przy pomocy Testing Library
🧩 Framework API, czyli brakujący kawałek umożliwiający integrację z nowymi bibliotekami i frameworkami. Na start dostajemy Next.js i SvelteKit, ale Remix i Nuxt już czekają w kolejce.
⚡ Pełnoprawne wsparcie dla Vite

Źródła

https://storybook.js.org/blog/7-0-beta/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

3. Podsumowanie roku od Node Weekly i React Weekly

Wielkimi krokami zbliżamy się do końca roku, a to oznacza, że okres wszelakich podsumowań jest już w pełni. W minionym tygodniu Peter Cooper, czyli autor bardzo popularnych newsleterów dotyczących JavaScriptu (między innymi React Status, Node Weekly, JavaScript Weekly), zdecydował się poświęcić kilka ze swoich publikacji podsumowaniu najlepszych artykułów z minionego roku. Jeśli w trakcie przerwy świątecznej będziecie szukać czegoś do lektury, to na pewno znajdziecie tu coś dla siebie.

The Best of Node Weekly in 2022

The Best of React Status in 2022

Z racji tego, że jest to już ostatnia edycja naszego przeglądu w tym roku, życzę Wszystkim pysznego barszczyku i szampańskiego sylwestra. Do zobaczenia za rok!