React kr\u00f3luje na froncie web developmentu. Ale bywa, \u017ce zamiast oszcz\u0119dza\u0107 czas i pieni\u0105dze, generuje ukryte koszty. Widzia\u0142em projekty, gdzie zesp\u00f3\u0142 przez rok walczy\u0142 z w\u0142asnym kodem, a wdro\u017cenie nowej funkcji zajmowa\u0142o tygodnie. Problemem nie by\u0142 sam React, tylko spos\u00f3b, w jaki zosta\u0142 u\u017cyty. Oto trzy b\u0142\u0119dy, kt\u00f3re najcz\u0119\u015bciej widz\u0119 \u2013 i kt\u00f3re potrafi\u0105 zrujnowa\u0107 bud\u017cet oraz harmonogram.<\/p>\n
Znam firm\u0119, kt\u00f3ra budowa\u0142a dashboard dla klienta. Zesp\u00f3\u0142 junior\u00f3w wpad\u0142 w pu\u0142apk\u0119 \u2013 ka\u017cdy przycisk, ka\u017cda etykieta musia\u0142a by\u0107 osobnym komponentem z propsami do configuracji. Efekt? Po trzech miesi\u0105cach mieli kilkaset ma\u0142ych komponent\u00f3w, z kt\u00f3rych wi\u0119kszo\u015b\u0107 by\u0142a u\u017cywana tylko raz. Ka\u017cda zmiana wymusza\u0142a przegl\u0105danie dziesi\u0105tek plik\u00f3w, a nowi programi\u015bci gubili si\u0119 w abstrakcjach.<\/p>\n
Lekcja:<\/strong> Nie tw\u00f3rz komponent\u00f3w uniwersalnych, dop\u00f3ki nie masz realnego przypadku u\u017cycia. Lepiej zacz\u0105\u0107 od konkret\u00f3w i wyabstrahowa\u0107 p\u00f3\u017aniej \u2013 zasada DRY (Don’t Repeat Yourself) ma sens tylko wtedy, gdy powt\u00f3rzenia s\u0105 rzeczywiste, a nie hipotetyczne. Nadmiar abstrakcji to dodatkowy kod do testowania i utrzymania, bez realnej warto\u015bci biznesowej.<\/p>\n Widzia\u0142em aplikacj\u0119 e-commerce, gdzie ka\u017cda zmiana \u2013 od widoczno\u015bci dropdowna po ilo\u015b\u0107 produkt\u00f3w w koszyku \u2013 l\u0105dowa\u0142a w globalnym stanie. Pow\u00f3d? \u201eAby by\u0142o \u0142atwo dost\u0119pne\u201d. Skutek: przy ka\u017cdej interakcji przebudowywa\u0142a si\u0119 ca\u0142a aplikacja, a React niepotrzebnie re-renderowa\u0142 setki komponent\u00f3w. U\u017cytkownicy narzekali na op\u00f3\u017anienia, a czas \u0142adowania strony wzr\u00f3s\u0142 o 40%.<\/p>\n Lekcja:<\/strong> Zastan\u00f3w si\u0119, czy dane naprawd\u0119 musz\u0105 by\u0107 globalne. Stan koszyka \u2013 tak. Stan otwarcia modala \u2013 nie. U\u017cywaj lokalnego stanu (useState) lub dedykowanych bibliotek do zarz\u0105dzania formularzami (np. React Hook Form). Redux czy Context s\u0105 dla danych wsp\u00f3\u0142dzielonych przez wiele niepowi\u0105zanych komponent\u00f3w \u2013 nie dla wszystkiego.<\/p>\n Kolejny startup pracowa\u0142 nad platform\u0105 SaaS. Zesp\u00f3\u0142 sp\u0119dzi\u0142 dwa tygodnie na optymalizacjach \u201ena \u015blepo\u201d \u2013 memoizacja, useMemo, useCallback, a wszystko bez pomiar\u00f3w. Po wdro\u017ceniu okaza\u0142o si\u0119, \u017ce faktycznym problemem by\u0142a operacja na tablicy 10 000 element\u00f3w w funkcji renderuj\u0105cej list\u0119. Profiler w DevToolsach wskaza\u0142 winowajc\u0119 w minut\u0119. Dwa tygodnie pracy posz\u0142y w b\u0142oto.<\/p>\n Lekcja:<\/strong> Zanim zaczniesz optymalizowa\u0107, zmierz. React DevTools Profiler, Chrome DevTools Performance tab \u2013 te narz\u0119dzia poka\u017c\u0105, kt\u00f3re komponenty s\u0105 faktycznie wolne. Cz\u0119sto problemem nie jest React, ale niefortunna p\u0119tla, ci\u0119\u017ckie obliczenia synchroniczne czy nieoptymalne struktury danych. Optymalizuj tylko to, co jest realnym w\u0105skim gard\u0142em.<\/p>\n React to pot\u0119\u017cne narz\u0119dzie, ale \u0142atwo wpa\u015b\u0107 w pu\u0142apk\u0119 przesadnego in\u017cynierowania. Zbyt wczesna abstrakcja, nadmiar globalnego stanu i optymalizacja na \u015blepo to koszty, kt\u00f3re realnie obci\u0105\u017caj\u0105 bud\u017cet i op\u00f3\u017aniaj\u0105 wdro\u017cenia. W JurskiTech widzimy to na co dzie\u0144 \u2013 pomagamy firmom wyj\u015b\u0107 z takich nawyk\u00f3w i skupi\u0107 si\u0119 na tym, co naprawd\u0119 ma znaczenie: dzia\u0142aj\u0105cej aplikacji zadowalaj\u0105cej u\u017cytkownik\u00f3w. Je\u015bli Tw\u00f3j zesp\u00f3\u0142 walczy z w\u0142asnym kodem, mo\u017ce czas przyjrze\u0107 si\u0119 tym trzem obszarom \u2013 zanim koszty utopione stan\u0105 si\u0119 horrorem.<\/p>\n","protected":false},"excerpt":{"rendered":" Koszty utopione w React: 3 b\u0142\u0119dy, kt\u00f3re rujnuj\u0105 Twoj\u0105 aplikacj\u0119 React kr\u00f3luje na froncie web developmentu. Ale bywa, \u017ce zamiast oszcz\u0119dza\u0107 czas i pieni\u0105dze, generuje ukryte koszty. Widzia\u0142em projekty, gdzie zesp\u00f3\u0142 przez rok walczy\u0142 z w\u0142asnym kodem, a wdro\u017cenie nowej funkcji zajmowa\u0142o tygodnie. Problemem nie by\u0142 sam React, tylko spos\u00f3b, w jaki zosta\u0142 u\u017cyty. Oto<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[265,513,431,47],"class_list":["post-1816","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-architektura-frontendu","tag-bledy-ai","tag-optymalizacja-wydajnosci","tag-react"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1816"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1816\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. Global state jako \u015bmieciarka \u2013 wszystko w Reduxie czy Context API<\/h3>\n
3. Brak profilerowania \u2013 czyli zgadywanie, co jest wolne<\/h3>\n
Podsumowanie<\/h3>\n