Zaawansowane pytania podczas rekrutacji React Developera

MPA (Multi-Page Application)

MPA to tradycyjny typ aplikacji web, gdzie każda modyfikacja strony powoduje pobranie nowej strony z serwera. To podejście jest dobrze znane z przeszłości internetu i jest nadal popularne w aplikacjach, które wymagają silnego rozdzielenia między poszczególnymi stronami, takimi jak korporacyjne portale czy platformy e-commerce. Zalety MPA obejmują prostotę w skalowaniu i optymalizacji SEO, ponieważ każda strona jest indeksowana przez wyszukiwarki jako oddzielny byt.

SPA (Single Page Application)

SPA to aplikacje, które ładują całą aplikację na start, a następnie, używając JavaScript (w przeglądarce), dynamicznie aktualizują treść bez ponownego ładowania całej strony. Użytkownik doświadcza płynniejszych przejść i szybszej reakcji aplikacji, ponieważ większość zasobów, w tym HTML, CSS i skrypty, jest ładowana tylko raz na początku. SPA jest często stosowane w aplikacjach wymagających interaktywności i szybkiej odpowiedzi, takich jak dashboardy czy narzędzia analityczne. Wysoka interaktywność jest zapewniana dzięki renderowaniu po stronie przeglądarki. Wadą może być początkowa wydajność ładowania oraz potencjalne problemy z SEO, które można jednak przezwyciężyć przez odpowiednie techniki optymalizacyjne i narzędzia takie jak prerendering.

SSR (Server-Side Rendering)

SSR to technika, w której treść stron jest generowana po stronie serwera przy każdym żądaniu użytkownika. Strona jest szybko dostępna dla użytkownika, co jest korzystne dla SEO i początkowego czasu ładowania, ponieważ wyszukiwarki mogą indeksować treść bardziej efektywnie. Po załadowaniu strony, zachodzi proces hydracji, gdzie skrypty JavaScript są dociągane, co umożliwia dynamiczne interakcje z użytkownikiem podobne do SPA. SSR jest często stosowane w nowoczesnych frameworkach jak Next.js, które mogą automatycznie zarządzać renderowaniem po stronie serwera i klienckiej.

SSG (Static Site Generation)

SSG polega na generowaniu statycznych stron HTML w momencie budowania aplikacji. Każda strona jest z góry przygotowana i gotowa do szybkiego serwowania, co jest idealne dla stron, gdzie zawartość zmienia się rzadko, ale musi być dostępna bardzo szybko. Po pierwszym ładowaniu, podobnie jak w SSR, może zachodzić proces hydracji, gdzie dociągane są skrypty JavaScript, umożliwiając dynamiczne interakcje bez potrzeby odświeżania strony. SSG jest często używane w blogach, dokumentacjach produktów i witrynach portfolio, gdzie SEO i szybkość ładowania są krytyczne.

Lazy Loading komponentów

Leniwe ładowanie komponentów, czyli lazy loading, to technika, która pozwala na ładowanie kodu tylko wtedy, gdy jest on potrzebny. Dzięki temu można znacząco zredukować początkowy czas ładowania aplikacji, co jest szczególnie korzystne w dużych projektach z wieloma różnymi funkcjonalnościami, które nie są potrzebne od razu przy starcie.

// HeavyComponent.js
import React from 'react';

const HeavyComponent = () => {
  return <div>Heavy Component here</div>;
};

export default HeavyComponent;

// App.js
import React, { Suspense } from 'react';

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Hello World!</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Memoizacja komponentów i wyników funkcji

Memoizacja to technika optymalizacji, która polega na zapamiętywaniu wyników wywołań funkcji lub renderowania komponentów, aby unikać kosztownych operacji przy kolejnych renderowaniach. W React, memoizacja pomaga minimalizować liczbę re-renderów przez przechowywanie wyników i reużywanie ich, gdy dane wejściowe nie uległy zmianie.

const MyComponent = React.memo(function MyComponent(props) {
    /* render using props */
    return <div>{props.children}</div>;
});

import React, { useMemo } from 'react';

function ExpensiveComponent({ count }) {
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue(count);
  }, [count]);

  return <div>{expensiveValue}</div>;
}

function computeExpensiveValue(num) {
  console.log('Computing expensive value');
  return num * 2; // Simulate heavy operation
}

import React, { useCallback, useState } from 'react';

function MyButton() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((c) => c + 1);
  }, []); // Dependencies are empty so function won't update

  return <button onClick={increment}>Count: {count}</button>;
}

Optymalizacja renderowania list i elementów

W przypadku renderowania dużych list czy tabel, wydajność może być znacząco poprawiona przez ograniczenie liczby re-renderów elementów. Użycie React.memo() w połączeniu z prawidłowym kluczowaniem elementów (używając unikalnych i stabilnych wartości jako kluczy) może pomóc w optymalizacji. Dodatkowo, narzędzia jak react-window lub react-virtualized pozwalają na renderowanie tylko tych elementów, które są widoczne dla użytkownika, redukując obciążenie DOM.

Optymalne zarządzanie stanem

Zarządzanie stanem w dużych aplikacjach React może wpłynąć na wydajność, zwłaszcza gdy aktualizacje stanu powodują niepotrzebne re-renderowania. Użycie kontekstu, Reduxa lub innych zarządców stanu z rozwagą oraz minimalizowanie liczby komponentów podłączonych do globalnego stanu może zredukować narzut. Ponadto, zastosowanie technik takich jak debouncing lub throttling na handlerach zdarzeń może ograniczyć ilość aktualizacji stanu na sekundę.

Profilowanie i optymalizacja na podstawie rzeczywistych metryk

React Developer Tools oferuje panel do profilowania wydajności komponentów, który pomaga zidentyfikować, które komponenty najczęściej są renderowane i jak długo trwają ich renderowania. Analiza tych danych pozwala na zidentyfikowanie wąskich gardeł i odpowiednie modyfikowanie kodu w celu skuteczniejszej optymalizacji.

Korzyści z używania TypeScript w React

Lepsza jakość kodu: TypeScript wprowadza statyczną typizację, co może znacznie poprawić jakość kodu przez wczesne wykrywanie błędów typów i bardziej czytelne definicje interfejsów i typów.

Ułatwienie refaktoryzacji: Dzięki statycznemu typowaniu, TypeScript ułatwia bezpieczne refaktoryzowanie kodu, ponieważ zmiany w typach są propagowane przez cały kod, co minimalizuje ryzyko wprowadzenia błędów.

Lepsza współpraca w zespole: Typy w TypeScript mogą służyć jako dokumentacja, co jest szczególnie przydatne w większych zespołach, gdzie programiści mogą nie być zaznajomieni z całym kodem aplikacji. Utworzenie otypowanego kodu zapewnia doskonałą dokumentację na przyszłość, która ułatwia nowym członkom zespołu szybsze zrozumienie i integrację z projektem.

Zwiększona produktywność dewelopera: Funkcje takie jak autouzupełnianie kodu i natychmiastowe przekazywanie informacji zwrotnych o błędach przyczyniają się do szybszego i efektywniejszego tworzenia kodu.

Wyzwania przy integracji TypeScript z istniejącym projektem React

Krzywa uczenia się: Dla zespołów nieobeznanych z TypeScript, początkowa krzywa uczenia się może być wyzwaniem, może wywoływać krótkoterminowy spadek produktywności.

Migracja kodu: Przekształcenie istniejącej bazy kodu JavaScript do TypeScript może być czasochłonne i podatne na błędy, zwłaszcza w dużych projektach.

Zarządzanie typami zewnętrznymi bibliotek: Nie wszystkie biblioteki JS mają dobre wsparcie dla typów TypeScript, co może dodać pracy przy tworzeniu lub zarządzaniu własnymi definicjami typów.

Zwiększenie złożoności narzędzi: Wprowadzenie TypeScript do projektu często wiąże się z koniecznością aktualizacji lub modyfikacji istniejącego stosu narzędzi deweloperskich, co może wprowadzić dodatkową złożoność.