/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", h2: "h2", div: "div", pre: "pre", code: "code", span: "span", strong: "strong", a: "a", h3: "h3" }, _provideComponents(), props.components), {Image} = _components; if (!Image) _missingMdxReference("Image", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Providery w Reakcie to zdecydowanie jedna z najistotniejszych rzeczy przy budowaniu aplikacji webowych. To właśnie z ich pomocą raz na zawsze zakończyliśmy bolączkę w postaci przesyłania X razy propsów w dół do naszych dzieci, żeby dzielić stan między sobą. Pomimo tego, że context API znacznie ułatwia nam zarządzanie globalnym stanem, pomagając jednocześnie przy codziennej pracy, musimy być czujni i uważać na pułapki, które mogą negatywnie wpłynąć na wydajność naszej strony. Dlatego w tym artykule chciałbym Cię przestrzec przed najczęściej popełnianymi błędami podczas używania providerów, które spotykam szczególnie wśród początkujących programistów, zaczynających dopiero swoją przygodę z Reactem. Mam nadzieję, że po przeczytaniu tego posta lepiej zrozumiesz w jaki sposób działa share'owanie stanu w Reakcie, co pozwoli pisać Ci bardziej świadomy oraz wydajny kod. Zapraszam do lektury 🙂." }), "\n", _jsx(_components.h2, { children: "Jak dzielić stan pomiędzy komponentami?" }), "\n", _jsx(_components.p, { children: "Proponuję zacząć od krótkiego przypomnienia, w jaki sposób tworzymy providery w Reakcie:" }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "App.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ThemeContext ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "createContext" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token string", children: "'dark'" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token string", children: "'light'" }), _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'dark'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "App" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token string", children: "'dark'" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Theme ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "Theme.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "Theme" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " theme ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useContext" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), "Current theme", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "strong", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "strong", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "p", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Na początku stworzyliśmy ", _jsx(_components.code, { children: "ThemeContext" }), " za pomocą funkcji ", _jsx(_components.code, { children: "createContext" }), ", zaimportowanej z Reacta. Do środka przekazaliśmy ", _jsx(_components.strong, { children: "domyślną wartość" }), ", która zostanie użyta na wypadek, gdy React ", _jsx(_components.strong, { children: "nie znajdzie żadnego providera w drzewie komponentów rodziców" }), ". Następnie w głównym komponencie ", _jsx(_components.code, { children: "App" }), " wyrenderowaliśmy ", _jsx(_components.code, { children: "ThemeContext.Provider" }), ", który ", _jsxs(_components.strong, { children: ["dostarczy przekazaną wartość ", _jsx(_components.code, { children: "value" }), " do swoich dzieci"] }), ". Finalnie zostało nam już tylko odczytać wartość z contextu za pomocą hooka ", _jsx(_components.code, { children: "useContext" }), ". No i to tyle, właśnie udało nam się przekazać stan do swoich dzieci. Kod działa, a my możemy rozejść się do domu. Providery w Reakcie wydają się na tyle proste i logiczne, że przecież nic złego nie może się tutaj wydarzyć - ale czy na pewno? Pójdźmy o krok dalej i rozbudujmy trochę ten przykład."] }), "\n", _jsx(_components.h2, { children: "Task z jiry" }), "\n", _jsxs(_components.p, { children: ["Zderzmy się z rzeczywistym problemem, który możemy napotkać przy codziennej pracy z Reactem. Powiedzmy, że dostaliśmy taska na jirze, w którym to musimy zaimplementować ", _jsx(_components.strong, { children: "dark theme" }), " oraz ", _jsx(_components.strong, { children: "system logowania" }), ". W opisie zadania jasno postawiono nam wymogi, że zarówno theme, jak i zalogowany user ", _jsx(_components.strong, { children: "powinien być łatwo dostępny z poziomu każdego komponentu" }), ". Do głowy od razu przychodzi nam context API. Zabieramy się więc do pracy."] }), "\n", _jsx(_components.p, { children: "Idąc po linii najmniejszego oporu, pierwsza wersja naszego zadania mogłaby wyglądać mniej więcej w taki sposób:" }), "\n", _jsx("iframe", { src: "https://codesandbox.io/embed/wydajne-providery-w-reactjs-1-rq879q?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&theme=dark", style: { width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }, title: "wydajne-providery-w-reactjs-1", allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" }), "\n", _jsx(_components.p, { children: "Na pierwszy rzut oka wszystko działa, a my czujemy, że możemy zamknąć taska, wrzucić brancha na code review i być z siebie dumni, że podołaliśmy kolejnemu ciężkiemu zadaniu w robocie. Czy aby na pewno? Przyjrzyjmy się temu bliżej." }), "\n", _jsxs(_components.p, { children: ["Dzielony stan pomiędzy komponentami zdefiniowaliśmy ", _jsxs(_components.strong, { children: ["bezpośrednio w komponencie ", _jsx(_components.code, { children: "App" })] }), ", czyli ", _jsx(_components.strong, { children: "głównym komponencie naszej aplikacji" }), ". Jest to pierwszy, ", _jsx(_components.strong, { children: "bardzo częsty błąd popełniany przez początkujących programistów" }), ". Nie ma co się dziwić, bo wydaje się to dosyć logiczne i intucyjne, żeby dzielony stan wrzucić na samą górę naszej aplikacji. Spowoduje to natomiast pewne problemy. Przede wszystkim, z perspektywy czytelności kodu, ", _jsx(_components.strong, { children: "nie jest to najlepsze podejście" }), ", bo w przyszłości, gdy do naszej aplikacji dojdą jeszcze dwa globalne stany, plik ", _jsx(_components.code, { children: "App.tsx" }), " ", _jsx(_components.strong, { children: "urośnie i nie będzie dało się go przeczytać" }), ". Ja natomiast chciałbym skupić się na drugej, trochę poważniejszej konsekwencji tego błędu."] }), "\n", _jsxs(_components.p, { children: ["Używając wartości z globalnego stanu w komponencie oczekujemy od niej, że gdy ta ", _jsx(_components.strong, { children: "ulegnie zmianie" }), ", nasz komponent ", _jsx(_components.strong, { children: "również się przerenderuje wraz z najnowszymi danymi" }), ". Jak React sobie z tym radzi? Każdy komponent, który używa w sobie hooka ", _jsx(_components.code, { children: "useContext" }), " ", _jsx(_components.strong, { children: "zostanie automatycznie przerenderowany" }), ", gdy zmieni się wartość ", _jsx(_components.code, { children: "value" }), " pochodząca z naszego providera. No właśnie - powinny przerenderować się ", _jsx(_components.strong, { children: "tylko" }), " komponenty używające hooka ", _jsx(_components.code, { children: "useContext" }), ", czy tak się u nas dzieje?"] }), "\n", _jsx(Image, { src: "/posts/wydajne-providery-w-reactjs/preview-1.gif", alt: "Podgląd 1", width: 1680, height: 1050 }), "\n", _jsxs(_components.p, { children: ["Zauważ, że zmieniając wartość stanu ", _jsx(_components.code, { children: "theme" }), ", pochodzącego z ", _jsx(_components.code, { children: "ThemeContext.Provider" }), ", ", _jsx(_components.strong, { children: "przerenderowywują się wszystkie komponenty" }), ", a nie tylko te, ", _jsxs(_components.strong, { children: ["które wykorzystują hooka ", _jsx(_components.code, { children: "useContext" })] }), ". Dlaczego tak się dzieje? Zerknijmy na plik ", _jsx(_components.code, { children: "App.tsx" }), ":"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "App.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "App" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeTheme" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeUser" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Header ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "main style", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " padding", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"20px\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "User ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Theme ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "main", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "Footer ", _jsx(_components.span, { className: "token operator", children: "/" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Klikając przycisk ", _jsx(_components.code, { children: "Toggle theme" }), ", wywołujemy funkcję ", _jsx(_components.code, { children: "changeTheme" }), ". Funkcja ta wywołuje pod spodem ", _jsx(_components.code, { children: "setTheme" }), ", aby zaktualizować nasz stan. Tylko musimy pamiętać, że wywołanie settera z useState spowoduje ", _jsx(_components.strong, { children: "ponowne wykonanie funkcji komponentu" }), ", żeby ten mógł otrzymać najnowsze dane."] }), "\n", _jsxs(_components.p, { children: ["Dlatego właśnie po wywołaniu funkcji ", _jsx(_components.code, { children: "changeTheme" }), ", wywołujemy ", _jsx(_components.code, { children: "setTheme" }), ", co z kolei wywołuje funkcję ", _jsx(_components.code, { children: "App" }), ", a ponieważ w komponencie ", _jsx(_components.code, { children: "App" }), " wyrenderowaliśmy komponenty ", _jsx(_components.code, { children: "Header" }), ", ", _jsx(_components.code, { children: "User" }), ", ", _jsx(_components.code, { children: "Theme" }), " oraz ", _jsx(_components.code, { children: "Footer" }), " - ", _jsx(_components.strong, { children: "wszystkie zostaną wyrenderowane od nowa" }), " (nie biorąc pod uwagę memoizacji). Musimy więc pamiętać, żeby nie zagnieżdżać komponentów naszej aplikacji bezpośrednio w providerach, bo doprowadzi to do ", _jsx(_components.strong, { children: "przerenderowania całej aplikacji od nowa po zmianie jakiegokolwiek stanu" }), ", i przy okazji kompletnie nie korzystamy z optymalizacji, o której wcześniej wspomniałem."] }), "\n", _jsxs(_components.p, { children: ["Możemy poradzić sobie z tym problemem za pomocą propsa ", _jsx(_components.code, { children: "children" }), ". Zabierzmy się zatem za refaktoryzację."] }), "\n", _jsx(_components.h2, { children: "Przeniesienie providerów do osobnego pliku" }), "\n", _jsxs(_components.p, { children: ["Oczyściłem trochę plik ", _jsx(_components.code, { children: "App.tsx" }), " ", _jsx(_components.strong, { children: "przenosząc logikę odpowiedzialną za globalny stan" }), " do osobnego pliku - ", _jsx(_components.code, { children: "AppProviders.tsx" }), ". Zobaczmy jak to się teraz prezentuje:"] }), "\n", _jsx("iframe", { src: "https://codesandbox.io/embed/wydajne-providery-w-reactjs-2-52n96v?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fproviders%2FAppProviders.tsx&theme=dark", style: { width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }, title: "wydajne-providery-w-reactjs-2", allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" }), "\n", _jsxs(_components.p, { children: ["Patrząc na nasz projekt na pewno śmiało możemy powiedzieć, że ", _jsx(_components.strong, { children: "stał się on dużo czytelniejszy" }), ". Przenosząc kod do pliku ", _jsx(_components.code, { children: "AppProviders.tsx" }), " ", _jsxs(_components.strong, { children: ["nie zaśmiecamy już niepotrzebnie komponentu ", _jsx(_components.code, { children: "App" })] }), ". Wciąż nie jest idealnie, ale zawsze jest to jakiś krok do przodu 🙂. Skontrolujmy rerendery naszych komponentów:"] }), "\n", _jsx(Image, { src: "/posts/wydajne-providery-w-reactjs/preview-2.gif", alt: "Podgląd 2", width: 1680, height: 1050 }), "\n", _jsxs(_components.p, { children: ["Jest trochę lepiej, prawda? Przestaliśmy już niepotrzebnie rerenderować komponenty, które ", _jsx(_components.strong, { children: "nie korzystają z żadnego kontekstu" }), " i tak naprawdę ", _jsx(_components.strong, { children: "nie mają nawet powodu, żeby się ponownie wyrenderować" }), ". Natomiast zauważyłem teraz trochę inny problem. Po zmianie wartości stanu ", _jsx(_components.code, { children: "theme" }), ", React przerenderowywuje ", _jsxs(_components.strong, { children: ["wszystkie komponenty, które korzystają z hooka ", _jsx(_components.code, { children: "useContext" })] }), ". Dlaczego tak się dzieje?"] }), "\n", _jsxs(_components.p, { children: ["Tak jak już wcześniej wspomniałem, React ", _jsx(_components.strong, { children: "automatycznie przerenderuje komponent" }), " korzystający z hooka ", _jsx(_components.code, { children: "useContext" }), ", gdy ", _jsxs(_components.strong, { children: ["zmieni się wartość ", _jsx(_components.code, { children: "value" }), " w providerze"] }), ", po to, aby zaktualizować go o najnowsze dane. No dobra, ale skąd React ma wiedzieć, że wartość uległa zmianie i trzeba ponownie wyrenderować nasz komponent? Wszystko dzieje się za sprawą ", _jsx(_components.code, { children: "Object.is" }), ". React używa tej metody, aby ", _jsxs(_components.strong, { children: ["porównać wartość ", _jsx(_components.code, { children: "value" }), " względem poprzedniego i aktualnego rendera"] }), ", a następnie na podstawie zwróconego wyniku zadecyduje, ", _jsx(_components.strong, { children: "czy wartość uległa zmianie i trzeba przerenderować komponent" }), ", czy może jednak ", _jsx(_components.strong, { children: "zostawiamy go w spokoju" }), "."] }), "\n", _jsxs(_components.p, { children: ["Posiadając tę wiedzę, skupmy się na komponencie ", _jsx(_components.code, { children: "AppProviders" }), ":"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "AppProviders.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AppProviders" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeTheme" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeUser" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Znowu wywołując funkcję ", _jsx(_components.code, { children: "changeTheme" }), ", ta powoduje wywołanie ", _jsx(_components.code, { children: "setTheme" }), ", co z kolei przekłada się na ponowne wywołanie funkcji ", _jsx(_components.code, { children: "AppProviders" }), ". Dlatego toggle'ując stan za pomocą buttona na stronie, ", _jsxs(_components.strong, { children: ["spowoduje to rerender komponentu ", _jsx(_components.code, { children: "AppProviders" })] }), ". No spoko, ale jak to się ma do sposobu porównywania wartości ", _jsx(_components.code, { children: "value" }), ", o którym wcześniej wspomniałem?"] }), "\n", _jsxs(_components.p, { children: ["Spojrzmy na tę linijkę: ", _jsx(_components.code, { children: "" }), ". Przekazujemy w niej do propsa ", _jsx(_components.code, { children: "value" }), " ", _jsx(_components.strong, { children: "obiekt z naszym userem wraz z funkcją do jego zmiany" }), ". Zauważ, że w żaden sposób ", _jsx(_components.strong, { children: "nie zapisujemy tego obiektu" }), ". Jest on tworzony ", _jsx(_components.strong, { children: "od nowa za każdym razem przy wywołaniu naszej funkcji" }), ", co oznacza, że co render będzie ", _jsx(_components.strong, { children: "posiadał on inną referencję" }), ". Zaglądając do ", _jsxs(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is", children: ["dokumentacji ", _jsx(_components.code, { children: "Object.is" })] }), " możemy przeczytać, że obiekty ", _jsx(_components.strong, { children: "porównywane są za pomocą referencji" }), ", już rozumiesz?"] }), "\n", _jsxs(_components.p, { children: ["Pomimo tego, że ", _jsxs(_components.strong, { children: ["nie zmieniliśmy żadnej wartości stanu providera ", _jsx(_components.code, { children: "UserContext.Provider" })] }), ", przez to, że ", _jsxs(_components.strong, { children: ["zmieniła się referencja do obiektu w propsie ", _jsx(_components.code, { children: "value" })] }), ", React myśli, że ", _jsxs(_components.strong, { children: ["wartość w tym providerze również uległa zmianie i trzeba przerenderować wszystkie komponenty, które używają kontekstu ", _jsx(_components.code, { children: "UserContext" })] }), ". Tak właśnie działa pod spodem odświeżanie komponentów korzystających z kontekstów."] }), "\n", _jsx(_components.p, { children: "To jest drugi powód dla którego umieszczanie wszystkich providerów w jednym komponencie również nie jest najlepszą opcją. No dobra, ale czy możemy coś z tym zrobić? Spróbujmy 🙂." }), "\n", _jsx(_components.h3, { children: "Dodanie memoizacji" }), "\n", _jsx("iframe", { src: "https://codesandbox.io/embed/wydajne-providery-w-reactjs-3-nssnc8?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fproviders%2FAppProviders.tsx&theme=dark", style: { width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }, title: "wydajne-providery-w-reactjs-3", allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" }), "\n", _jsxs(_components.p, { children: ["Nasz komponent ", _jsx(_components.code, { children: "AppProviders" }), " ponownie uległ zmianie. Zaraz przyjrzymy mu się bliżej, ale najpierw skontrolujmy rerendery:"] }), "\n", _jsx(Image, { src: "/posts/wydajne-providery-w-reactjs/preview-3.gif", alt: "Podgląd 3", width: 1680, height: 1050 }), "\n", _jsxs(_components.p, { children: ["Co widzimy? Od teraz React ", _jsx(_components.strong, { children: "przerenderowywuje tylko i wyłącznie komponenty, w których globalny stan faktycznie uległ zmianie" }), ". Jest to zdecydowanie najbardziej optymalne rozwiązanie, bo ", _jsx(_components.strong, { children: "odświeżamy tylko to, co rzeczywiście tego potrzebuje" }), ". No dobra, zajrzyjmy do środka i przeanalizujmy zmiany:"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "AppProviders.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AppProviders" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changeTheme ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changeUser ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " themeValue ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " userValue ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "themeValue", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "userValue", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Zauważyłeś/aś co się zmieniło w nowym komponencie ", _jsx(_components.code, { children: "AppProviders" }), "? Jak widać, do naszych funkcji oraz wartości providerów doszły ", _jsx(_components.strong, { children: "dwa hooki" }), " - ", _jsx(_components.code, { children: "useCallback" }), " oraz ", _jsx(_components.code, { children: "useMemo" }), ". Jaki to ma cel?"] }), "\n", _jsxs(_components.p, { children: ["Od teraz React będzie ", _jsx(_components.strong, { children: "cache'ował definicje naszych funkcji oraz obiektów" }), " i dopóki ", _jsx(_components.strong, { children: "nie zmieni się tablica zależności" }), ", co każdy render otrzymamy ", _jsx(_components.strong, { children: "dokładnie tę samą referencję, co wywołanie wcześniej" }), ". Jaki to miało wpływ na ", _jsx(_components.code, { children: "useContext" }), "?"] }), "\n", _jsxs(_components.p, { children: ["Tym razem zmieniając wartość stanu ", _jsx(_components.code, { children: "theme" }), " za pomocą funkcji ", _jsx(_components.code, { children: "changeTheme" }), ", przerenderowanie komponentu spowoduje ", _jsxs(_components.strong, { children: ["zmianę referencji tylko i wyłącznie obiektu ", _jsx(_components.code, { children: "themeValue" })] }), ", co za tym idzie - przerenderują się ", _jsx(_components.strong, { children: "tylko i wyłącznie komponenty korzystające z jego kontekstu" }), ". Dlaczego?"] }), "\n", _jsxs(_components.p, { children: ["Do tablicy zależności ", _jsx(_components.code, { children: "themeValue" }), " przekazaliśmy ", _jsx(_components.strong, { children: "dwa obiekty" }), ": ", _jsx(_components.code, { children: "theme" }), " oraz ", _jsx(_components.code, { children: "changeTheme" }), ". Callback ", _jsx(_components.code, { children: "changeTheme" }), " nie powinien nigdy zmienić swojej referencji, ponieważ posiada ", _jsx(_components.strong, { children: "pustą tablicę zależności" }), ". Natomiast wywołując funkcję ", _jsx(_components.code, { children: "setTheme" }), " ", _jsx(_components.strong, { children: "zmutowaliśmy stan" }), ", co za tym idzie - ", _jsxs(_components.strong, { children: ["zmieniliśmy wartość ", _jsx(_components.code, { children: "theme" })] }), ", a więc ", _jsxs(_components.strong, { children: [_jsx(_components.code, { children: "useMemo" }), " w ", _jsx(_components.code, { children: "themeValue" }), " zwróci nową referencję"] }), ". Ponieważ referencja obiektu ", _jsx(_components.code, { children: "themeValue" }), " ", _jsx(_components.strong, { children: "uległa zmianie" }), ", ", _jsx(_components.code, { children: "Object.is" }), " zwróci ", _jsx(_components.code, { children: "false" }), ", co za tym idzie - React ", _jsxs(_components.strong, { children: ["musi odświeżyć komponenty korzystające z kontekstu ", _jsx(_components.code, { children: "ThemeContext" })] }), "."] }), "\n", _jsxs(_components.p, { children: ["W przypadku obiektu ", _jsx(_components.code, { children: "userValue" }), ", podczas zmiany stanu ", _jsx(_components.code, { children: "theme" }), ", ", _jsx(_components.strong, { children: "nie zmieniła się żadna wartość w tablicy zależności" }), ", dlatego ", _jsx(_components.strong, { children: "dostajemy za każdym razem tę samą referencję" }), ", a React ", _jsxs(_components.strong, { children: ["nie ma powodu, aby przerenderować komponenty używające kontekstu ", _jsx(_components.code, { children: "UserContext" })] }), ". W ten sposób udowodniłem, że porównywanie wartości ", _jsx(_components.code, { children: "value" }), " ", _jsxs(_components.strong, { children: ["faktycznie odbywa się za pomocą metody ", _jsx(_components.code, { children: "Object.is" })] }), "."] }), "\n", _jsx(_components.p, { children: "Fajnie, wszystko działa jak należy, ale czy możemy zrobić to lepiej? Oczywiście - na tworzenie providerów znam jeszcze lepszy sposób, pokażę Ci go 🙂." }), "\n", _jsx(_components.h2, { children: "Wydzielenie każdego providera do osobnego pliku" }), "\n", _jsxs(_components.p, { children: ["Zamiast ", _jsx(_components.strong, { children: "trzymać stan wszystkich providerów w jednym komponencie" }), ", możemy ", _jsx(_components.strong, { children: "stworzyć komponent ze stanem dla każdego providera osobno" }), ":"] }), "\n", _jsx("iframe", { src: "https://codesandbox.io/embed/wydajne-providery-w-reactjs-4-rx4lqg?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fproviders%2FAppProviders.tsx&theme=dark", style: { width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }, title: "wydajne-providery-w-reactjs-4", allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" }), "\n", _jsx(_components.p, { children: "Wprowadziliśmy kilka poprawek, ale zanim się im przyjrzymy, ponownie zacznijmy od skontrolowania sytuacji rerenderów:" }), "\n", _jsx(Image, { src: "/posts/wydajne-providery-w-reactjs/preview-4.gif", alt: "Podgląd 4", width: 1680, height: 1050 }), "\n", _jsxs(_components.p, { children: ["Tak jak widzimy, nasz kod dalej ", _jsx(_components.strong, { children: "zachowuje się w najbardziej optymalny sposób" }), ", ", _jsx(_components.strong, { children: "odświeżając tylko to, co potrzebne" }), ". Zajrzyjmy więc do środka i omówmy zmiany, które zaszły:"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "AppProviders.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AppProviders" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeProvider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserProvider", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "UserProvider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeProvider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "ThemeProvider.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "ThemeProvider" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeTheme" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "ThemeContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "UserProvider.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "UserProvider" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" children", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode", _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeUser" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "UserContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Z komponentu ", _jsx(_components.code, { children: "AppProviders" }), " ", _jsx(_components.strong, { children: "pozbyliśmy się tony kodu odpowiedzalnego za zarządzanie stanem dwóch providerów w naszej aplikacji" }), ". Został on ", _jsx(_components.strong, { children: "przeniesiony do osobnych komponentów" }), ", utworzonych specjalnie pod każdy provider - ", _jsx(_components.code, { children: "ThemeProvider" }), " oraz ", _jsx(_components.code, { children: "UserProvider" }), ". Jakie mamy zalety? Przede wszystkim ", _jsx(_components.strong, { children: "pozbyliśmy się problemu z czytelnością" }), ", o którym wspomniałem na samym początku tego artykułu. Od teraz chcąc edytować dany provider, ", _jsx(_components.strong, { children: "nie przebijamy się przez masę logiki pochodzącej z innego providera" }), ". Zamiast tego ", _jsx(_components.strong, { children: "udajemy się do osobnego komponentu" }), ", gdzie ", _jsx(_components.strong, { children: "wszystko jest ładnie uporządkowane" }), ". Jednocześnie jesteśmy przygotowani na ewentualność ", _jsx(_components.strong, { children: "dodania kolejnych providerów w przyszłości" }), ", bez obawy o czytelność kodu."] }), "\n", _jsxs(_components.p, { children: ["Bardziej spostrzegawcze osoby zauważyły pewnie, że ", _jsxs(_components.strong, { children: ["przestaliśmy również używać ", _jsx(_components.code, { children: "useCallback" }), " oraz ", _jsx(_components.code, { children: "useMemo" })] }), ", a mimo wszystko ", _jsx(_components.strong, { children: "kod zachowuje się tak, jak tego oczekiwaliśmy" }), ". Dlaczego tak się dzieje?"] }), "\n", _jsxs(_components.p, { children: ["Zauważ, że od teraz ", _jsx(_components.strong, { children: "nie renderujemy żadnego komponentu bezpośrednio w providerach" }), ". Zamiast tego przekazujemy je w propsie ", _jsx(_components.code, { children: "children" }), ". Oznacza to, że renderując ponownie komponent ", _jsx(_components.code, { children: "ThemeProvider" }), ", ", _jsxs(_components.strong, { children: ["nie spowoduje on przerenderowania komponentu ", _jsx(_components.code, { children: "UserProvider" })] }), ", ponieważ ", _jsx(_components.strong, { children: "go tam nie ma" }), ". Zwracamy tylko obiekt ", _jsx(_components.code, { children: "children" }), ", który ", _jsx(_components.strong, { children: "został utworzony wyżej" }), ". Tak więc zmieniając stan w komponencie ", _jsx(_components.code, { children: "ThemeProvider" }), ", ", _jsxs(_components.strong, { children: ["nie spowoduje on rerenderu ", _jsx(_components.code, { children: "UserProvider" })] }), ", co za tym idzie - referencja ", _jsx(_components.code, { children: "value" }), " ", _jsx(_components.strong, { children: "nie ulegnie zmianie podczas mutacji tego stanu" }), ", dzięki czemu React ", _jsxs(_components.strong, { children: ["nie przerenderuje komponentów korzystających z contextu ", _jsx(_components.code, { children: "UserContext" })] }), "."] }), "\n", _jsxs(_components.p, { children: ["Zdecydowanie jest to ", _jsx(_components.strong, { children: "najlepsze podejście z wyżej wymienionych" }), ". Dzięki niemu nie tylko ", _jsx(_components.strong, { children: "zyskaliśmy na czytelności kodu" }), ", ale i ", _jsxs(_components.strong, { children: ["pozbyliśmy się hooków ", _jsx(_components.code, { children: "useCallback" }), " oraz ", _jsx(_components.code, { children: "useMemo" })] }), ", co na pewno wpłynie pozytywnie na ", _jsx(_components.strong, { children: "optymalizację naszej strony Internetowej" }), "."] }), "\n", _jsx(_components.h2, { children: "Inny sposób na rozwiązanie zadania" }), "\n", _jsx(_components.p, { children: "Zabierając się za taska z jiry, tak naprawdę możemy rozwiązać go na jeszcze jeden sposób. Celowo pominąłem to podejście, żeby nie wprowadzać zamieszania, dlatego spójrzmy teraz na przykład:" }), "\n", _jsx("iframe", { src: "https://codesandbox.io/embed/wydajne-providery-w-reactjs-5-cjsx6z?expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fproviders%2FAppProvider.tsx&theme=dark", style: { width: '100%', height: '500px', border: 0, borderRadius: '4px', overflow: 'hidden' }, title: "wydajne-providery-w-reactjs-5", allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking", sandbox: "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" }), "\n", _jsxs(_components.p, { children: ["Osoby początkujące mogą ", _jsx(_components.strong, { children: "nie wpaść na pomysł" }), ", żeby stworzyć ", _jsx(_components.strong, { children: "dwa osobne providery" }), " - zamiast tego ", _jsx(_components.strong, { children: "utworzą jeden wielki provider" }), ", przechowujący ", _jsx(_components.strong, { children: "globalny stan naszej całej aplikacji" }), ". Jest to ", _jsx(_components.strong, { children: "poważny błąd" }), ", który zaraz Ci wytłumaczę, ale najpierw skontrolujmy rerendery na naszej stronie:"] }), "\n", _jsx(Image, { src: "/posts/wydajne-providery-w-reactjs/preview-5.gif", alt: "Podgląd 5", width: 1680, height: 1050 }), "\n", _jsxs(_components.p, { children: ["Ponownie wróciliśmy do problemu, który przez cały czas próbowaliśmy zwalczyć - ", _jsxs(_components.strong, { children: ["rerenderujemy wszystkie komponenty, używające hooka ", _jsx(_components.code, { children: "useContext" })] }), ". Muszę Cię niestety zmartwić - ", _jsx(_components.strong, { children: "tutaj nie da się tego naprawić i tym razem nawet memoizacja nam nie pomoże" }), " - dlaczego? Spójrzmy na plik ", _jsx(_components.code, { children: "AppProvider.tsx" }), ":"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "AppProvider.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AppProvider" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " children ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeTheme" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "changeUser" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), "AppContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "AppContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Widzimy, że komponent ", _jsx(_components.code, { children: "AppProvider" }), " odpowiedzialny jest za ", _jsx(_components.strong, { children: "przechowywanie globalnego stanu całej naszej aplikacji" }), ". Jaki jest w tym problem?"] }), "\n", _jsxs(_components.p, { children: ["Tak jak wcześniej wspomniałem, React ", _jsx(_components.strong, { children: "analizuje kiedy ma przerenderować komponenet" }), " za pomocą metody ", _jsx(_components.code, { children: "Object.is" }), ". W tym przypadku wywołanie funkcji ", _jsx(_components.code, { children: "changeTheme" }), " spowoduje wywołanie ", _jsx(_components.code, { children: "setTheme" }), ", co z kolei przełoży się na wywołanie funkcji ", _jsx(_components.code, { children: "AppProvider" }), ", czyli wykonamy rerender. Przy następnym wywołaniu funkcji ", _jsxs(_components.strong, { children: ["ponownie tworzymy obiekt ", _jsx(_components.code, { children: "{ theme, user, changeTheme, changeUser }" })] }), ", więc ", _jsx(_components.strong, { children: "dostaje on nową referencję" }), ", ", _jsx(_components.code, { children: "Object.is" }), " zwraca ", _jsx(_components.code, { children: "false" }), " i w konsekwencji ", _jsx(_components.strong, { children: "dostajemy rerender" }), ". No dobra, to może znowu spróbujemy ugasić pożar za pomocą memoizacji?"] }), "\n", _jsx(_components.div, { className: "rehype-code-title", children: "AppProvider.tsx" }), _jsx(_components.pre, { className: "language-ts", children: _jsxs(_components.code, { className: "language-ts code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token function-variable function", children: "AppProvider" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " children ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token keyword", children: "readonly" }), " children", _jsx(_components.span, { className: "token operator", children: ":" }), " ReactNode ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " setTheme", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "Theme", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"dark\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "user", _jsx(_components.span, { className: "token punctuation", children: "," }), " setUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token generic-function", children: [_jsx(_components.span, { className: "token function", children: "useState" }), _jsxs(_components.span, { className: "token generic class-name", children: [_jsx(_components.span, { className: "token operator", children: "<" }), "User", _jsx(_components.span, { className: "token operator", children: ">" })] })] }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" id", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" email", _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"foo@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changeTheme ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token operator", children: ":" }), " Theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setTheme" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "theme", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " changeUser ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useCallback" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token operator", children: ":" }), " User", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token function", children: "setUser" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "user", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " value ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useMemo" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "theme", _jsx(_components.span, { className: "token punctuation", children: "," }), " user", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeTheme", _jsx(_components.span, { className: "token punctuation", children: "," }), " changeUser", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token operator", children: "<" }), "AppContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider value", _jsx(_components.span, { className: "token operator", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "value", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "children", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token operator", children: "<" }), _jsx(_components.span, { className: "token operator", children: "/" }), "AppContext", _jsx(_components.span, { className: "token punctuation", children: "." }), "Provider", _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ";" }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["Widzimy, że memoizacja w tym przypadku ", _jsx(_components.strong, { children: "nie ma kompletnie żadnego sensu" }), ", bo do tablicy zależności przekazujemy ", _jsx(_components.code, { children: "theme" }), ", który zmieni się po wywołaniu funkcji ", _jsx(_components.code, { children: "changeTheme" }), ", tak więc obiekt ", _jsx(_components.code, { children: "value" }), " ", _jsx(_components.strong, { children: "i tak za każdym razem dostanie nową referencję" }), "."] }), "\n", _jsxs(_components.p, { children: ["Upraszczając to co napisałem wyżej - ", _jsx(_components.strong, { children: "zamiast tworzyć jeden ogromny provider, lepiej utworzyć kilka mniejszych, przechowujących małe, zgrupowane wartości" }), ". Dzięki temu ", _jsx(_components.strong, { children: "unikniemy sytuacji rerenderowania komponentów, które co prawda korzystają z tego samego kontekstu, ale wartość, której używamy się nie zmieniła" }), ", więc ten rerender ", _jsx(_components.strong, { children: "kompletnie nic nie wnosi i wpłyna negatywnie na wydajność" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Problem rerenderowania komponentów, których używana wartość ze stanu nie uległa zmianie" }), " to dosyć powszechny temat, dlatego powstało na to kilka rozwiązań. Zamiast korzystać z domyślnego sposobu na globalny stan w Reakcie, możemy ", _jsx(_components.strong, { children: "posłużyć się popularnymi bibliotekami do state managment'u" }), ". Pomocny może okazać się tutaj chociażby ", _jsx(_components.a, { href: "https://zustand-demo.pmnd.rs/", children: "zustand" }), ", który ", _jsx(_components.strong, { children: "trzyma swój stan poza Reactem" }), " i ", _jsxs(_components.strong, { children: ["synchronizuje go za pomocą hooka ", _jsx(_components.code, { children: "useSyncExternalStore" })] }), ". Rozwiązał on m.in ", _jsx(_components.strong, { children: "ten, jak i masę innych problemów" }), ", dlatego zainteresowanych odsyłam do dokumentacji 🙂."] }), "\n", _jsx(_components.h2, { children: "Podsumowanie" }), "\n", _jsx(_components.p, { children: "To tyle na dzisiaj. Tym artykułem chciałem rozjaśnić Ci trochę, w jaki sposób działa globalny stan w Reakcie, żebyś mógł pisać bardziej świadomy oraz wydajny kod. Mam nadzieję, że wyniosłeś z niego jakąś cenną lekcję, którą zastosujesz przy codziennej pracy. Zainteresowanych zachęcam również do podzielenia się swoimi przemyśleniami w sekcji komentarzy 🙂." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Wszystkie posty