Introduction
The React ecosystem is evolving, and the React Compiler is a game-changer. Here’s a comprehensive look at how this new tool enhances performance by automating optimisations.
Check out my insights and predictions.
I believe hyperlinks in articles can be distracting. You will find the sources that helped my reflections at the end of this article.
With that said, let’s dive into the context.
React
In 2013, browsers were inefficient at updating the DOM. The React team developed a new approach called the Virtual DOM (VDOM). Elements are first updated in the VDOM before being passed to the actual DOM.
Reactivity in React is handled at run time. When a component re-renders, it updates the view along with its nested components. This process can be optimised using techniques such as hooks (useCallback and useMemo) and memoization (memo).
Svelte
By 2016, browsers had evolved, and updating the DOM directly was no longer as slow. Svelte compiles the code into optimised JavaScript that interacts directly with the DOM.
Reactivity in Svelte is handled at build time. Svelte compiler binds state to elements, allowing for more fine-grained updates.
Reactivity
Everyone seems to have their own definition of it. So here is mine:
Reactivity is the way the view responds to a change in the state
The relation between state and the view is as follows:
- A state is logical representation of a view
- A view is visual manifestation of a state
Let’s consider the following example:
Here is how both frameworks will handle reactivity if a new task is added to the list:
React
React will update the parent (TodoList) state (todos) to add a new task. It will re-render the parent which will trigger each child (Task) to re-render.
This operation can be optimised with hooks to prevent unnecessary re-renders.
Svelte
Svelte will add an new items to the state and append a new DOM element to the list.
No optimisation required.
React compiler
The previous example highlights the need to optimise React code to prevent unnecessary re-renders. As a developer, it feels like you need to handle the framework's optimisation yourself.
This can be cumbersome and lead to two patterns I’ve observed in my career:
- Those who never use optimisation hooks. Waiting for a optimisation issue to appear and investigating and fixing them (my approach)
- Those who overuse optimisation hooks. Wrapping all functions and computations into hooks to reduce the chance of optimisation issues. Reducing at the same time the readability and maintainability of the code base.
Those twos opposing approaches often lead to arguments in PRs, slowing down the overall workflow.
React compiler solve this issue by analysing your code and applying optimisation at build time.
An interesting aspect is optimisation will use Javascript primitives and not hooks.
the compiler memoizes using low-level primitives, not via
useMemo
If you already used hooks to optimise your code base. Don’t worry, the compiler will keep your optimisations, allowing you to implement it granularly.
One last thing to keep in mind is that the React Compiler will skip components that don’t respect React rules. To ensure your codebase respect these rules, you can add this linting rule — react-compiler/react-compiler — created for this purpose.
This will ensure your codebase is future-proof and can use React Compiler once it’s released.
Future
The first version of React compiler focuses on hooks (useCallback and useMemo) and memoization (memo) to facilitate optimisation. It optimise the code using Javascript primitives to achieve what they call "fine-grained reactivity".
This approach is very similar to what Svelte compiler already provides.
In the future, React may not only optimise during compilation but also build an optimised Javascript that interacts directly with the DOM, removing the VDOM abstraction leading to improved performances.
I hope you enjoyed this article.
If so, don’t hesitate to keep in contact with me:
Stay in touch on X (Twitter)
If not, please feel free to add your critiques in the comments.
Sources
As promised, here are all the sources for more information on the topic.
What is the Virtual Dom:
https://www.geeksforgeeks.org/reactjs-virtual-dom/
Conference about React philosophy:
https://www.youtube.com/watch?v=x7cQ3mrcKaY
Why Virtual Dom is not the best approach:
https://svelte.dev/blog/virtual-dom-is-pure-overhead
Conference about Svelte philosophy:
https://www.youtube.com/watch?v=AdNJ3fydeao
React-compiler linting rules:
https://www.npmjs.com/package/eslint-plugin-react-compiler
React-compiler doc:
https://react.dev/learn/react-compiler
React-compiler github discussion:
https://github.com/reactwg/react-compiler/discussions/5
Top comments (0)