W poprzedniej notce obiecałam, że napiszę Wam o React Compiler Playground. Co właściwie React Compiler robi z naszym kodem?

Zespół Reacta przygotował narzędzie, które pozwala to sprawdzić w bardzo prosty sposób:

👉 React Compiler Playground

https://playground.react.dev/

To interaktywny playground, w którym możecie wkleić swój kod React i zobaczyć jak zostanie on przekształcony przez kompilator.

Dzięki temu łatwiej zrozumieć:

• jakie optymalizacje wykonuje React Compiler
• kiedy dodawane są memoizacje
• jak kompilator zapobiega niepotrzebnym renderom

Jak działa React Compiler?

W skrócie: React Compiler analizuje kod komponentu i automatycznie dodaje optymalizacje, które wcześniej często pisaliśmy ręcznie.

Czyli zamiast używać np.:

• useMemo
• useCallback
• React.memo

kompilator może zrobić to za nas.

Jak używać React Compiler Playground

Po wejściu na stronę playgroundu zobaczycie dwa panele:

• po lewej – kod źródłowy React
• po prawej – kod po optymalizacji przez kompilator

Wystarczy wkleić komponent React i od razu zobaczymy jak zostanie przepisany.

Przykład 1 – komponent bez optymalizacji

Załóżmy, że mamy bardzo prosty komponent:

function Counter({ count }) {
  return <div>Count: {count}</div>;
}

Po przejściu przez kompilator kod może zostać przepisany w taki sposób, aby React wiedział kiedy komponent naprawdę musi się ponownie wyrenderować.

W playgroundzie zobaczycie wtedy, że kompilator dodaje mechanizmy, które zapamiętują poprzednie wartości propsów i unikają zbędnych renderów.

Czyli coś, co wcześniej robilibyśmy ręcznie za pomocą:

export default React.memo(Counter);

Przykład 2 – funkcje w propsach

Bardzo częsty problem w React to funkcje przekazywane w propsach:

function App() {
  const [count, setCount] = React.useState(0);  
  const increment = () => {
    setCount(count + 1);
  };  
  return <button onClick={increment}>Click</button>;
}

W tradycyjnym React często optymalizowaliśmy to tak:

React Compiler potrafi automatycznie rozpoznać, że dana funkcja może być stabilna i wprowadzić odpowiednią optymalizację.

Właśnie takie transformacje bardzo dobrze widać w playgroundzie.

---

Dlaczego React Compiler Playground jest przydatny

Playground pozwala zobaczyć coś, czego normalnie nie widać czyli jak React analizuje nasz kod.

Można dzięki temu:

• zrozumieć jak działa React Compiler
• sprawdzić czy nasz kod jest optymalizowalny
• zobaczyć kiedy kompilator dodaje memoizację
• nauczyć się pisać kod bardziej przyjazny dla kompilatora

To szczególnie ciekawe, jeśli do tej pory ręcznie dodawaliście:

• useMemo
• useCallback
• memo

Playground pozwala sprawdzić, czy w przyszłości te optymalizacje będą jeszcze potrzebne.

Mała wskazówka

Spróbujcie wkleić do playgroundu kod z jakiegoś swojego komponentu.

Najlepiej takiego, który:

• używa useMemo
• używa useCallback
• ma sporo propsów
• ma zagnieżdżone funkcje

Bardzo często okazuje się, że React Compiler potrafi zrobić sporą część tej pracy automatycznie.