Introduction to React Compiler

Transcript

1. Introduction to React Compiler @yossydev 1
2. Profile Name: ユウト Field: Web Frontend Developer X Bluesky Blog Youtube 2
3. Agenda 1. What is React 2. What is React Compiler 3. What makes the React Compiler happy? 4. React Compiler's HIR 5. Summary 3
4. What is React React とは？ 4
5. What is React Libraries that make it easier for developers to create web apps. 訳: Web アプリを開発者が作りやすいようにしてくれるライブラリ other tool Vue Svelte Astro SoildJS Qwik HonoX 5
6. What is React Compiler React Compiler とは？ 6
7. What is React Compiler React Compiler is a compiler that optimizes React applications, ensuring that only the minimal parts of components and hooks will re-render when state changes. The compiler also validates that components and hooks follow the Rules of React. https://github.com/facebook/react/blob/main/compiler/README.md React Compiler is a compiler that optimizes React applications 訳: React Compiler はReact アプリケーションを最適化するコンパイラ 7
8. What is React Compiler Foo is re-rendered every time a button is clicked. 訳: button をクリックするたびにFoo が再レンダリングされてしまう const App = () => { const [count, setCount] = useState(0); return ( <> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <Foo /> </> ); }; // Not memoised. const Foo = () => { console.log(" レンダリング！"); return <></>; }; 8
9. What is React Compiler Developer memoing to prevent unnecessary re-rendering. 訳: 開発者がメモ化して不要な再レンダリングを防ぐ const App = () => { const [count, setCount] = useState(0); return ( <> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <Foo /> </> ); }; // Not memoised. const Foo = memo(() => { console.log(" レンダリング！"); return <></>; }); 9
10. What is React Compiler React basically re-renders everything, so use the following API to optimise (memoise) 訳: React は基本的に全てを再レンダリングするので、以下のAPI を使って最適化（メモ 化）を行なう useMemo useCallback React.memo 10
11. What is React Compiler React Compiler does not use these and performs optimisations automatically! 訳: React Compiler はこれらを使用せず、自動的に最適化を行います！ - useMemo - useCallback - React.memo 11
12. What makes the React Compiler happy? React Compiler は何が嬉しいの？ 12
13. What makes the React Compiler happy? 1. Manual memoization → Auto memoization 2. Code can be checked by the compiler. 13
14. Manual memoization → Auto memoization 手動メモ化 → 自動メモ化 14
15. Manual memoization → Auto memoization Example) import { useState } from "react"; export default function MyApp() { const [name, setName] = useState(""); const [address, setAddress] = useState(""); const handleSubmit = (orderDetails) => { setAddress("122-2222"); post("/product/" + productId + "/buy", { referrer, orderDetails, }); }; j; const visibleTodos = () => filterTodos(todos, tab); return ( <> <p>{address}</p> <Greeting name={"Yuto"} /> <button onClick={visibleTodos}>Click!!</button> <button onClick={handleSubmit}>Click!!</button> </> ); } function Greeting({ name }) { console.log("Greeting was rendered at", new Date().toLocaleTimeString()); return ( <h3> Hello{name && ", "} {name}! </h3> ); } 15
16. Manual memoization → Auto memoization Example) part of one function MyApp() { const $ = _c(8); ...other const handleSubmit = t0; const visibleTodos = _temp; let t2; let t3; let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t2 = <Greeting name="Yuto" />; t3 = <button onClick={visibleTodos}>Click!!</button>; t4 = <button onClick={handleSubmit}>Click!!</button>; $[3] = t2; $[4] = t3; $[5] = t4; } else { t2 = $[3]; t3 = $[4]; t4 = $[5]; } return t5; } ...other 16
17. Manual memoization → Auto memoization Example) part of one function MyApp() { const $ = _c(8); // Generate an Array with a capacity of 8 ...other const handleSubmit = t0; const visibleTodos = _temp; let t2; let t3; let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { // Cache if Symbol.for("react.memo_cache_sentinel") is true. t2 = <Greeting name="Yuto" />; t3 = <button onClick={visibleTodos}>Click!!</button>; t4 = <button onClick={handleSubmit}>Click!!</button>; $[3] = t2; $[4] = t3; $[5] = t4; } else { // If Symbol.for("react.memo_cache_sentinel") is false, return cached results. t2 = $[3]; t3 = $[4]; t4 = $[5]; } return t5; } ...other 17
18. Manual memoization → Auto memoization For me, it's good that this reduces communication about whether to memoise or not. 訳: メモ化するしないのコミュニケーションも減らせる a. 「Is memoing here necessary? 」 b. 「Necessary because 〇〇 is 〇〇」 18
19. Code can be checked by the compiler コンパイラによるコードのチェックができる 19
20. Code can be checked by the compiler Question) Do you think this code is an error? 訳: このコードはエラーになると思いますか？ function Component(props) { const items = []; for (const x of props.items) { x.modified = true; items.push(x); } return items; } 20
21. code can be checked by the compiler Answer) Compilation error! InvalidReact: Mutating component props or hook arguments is not allowed. Consider using a local variable instead (4:4) function Component(props) { const items = []; for (const x of props.items) { x.modified = true; items.push(x); } return items; } 21
22. Code can be checked by the compiler 他にもエラーになるケースはたくさんあります！playground を触ったり、テストケー スを見たりしてみてください！ 22
23. まとめ 23
24. まとめ React Compiler がReact19 から入る 自動で最適化を行ってくれたり、変なコードはコンパイルエラーを出してくれる ようになる 特段何か設定する必要はない babel プラグインとして使う フレームワーク側の設定に合わせる 他にも面白いものあるよ！（eslintSuppressionRules, opt-in/opt-out, HIR... ） 24
25. React19 楽しみです！！！！！ 25