Lit Framework Challenging React on Performance
A recent analysis argues that the Lit framework can offer superior performance to React in certain applications. The comparison highlights Lit's use of signals and native browser templates, which result in a smaller bundle size (~5KB) and avoid a virtual DOM. This approach can be advantageous in complex, state-heavy applications like dashboards where rendering performance is critical.
- Lit, a lightweight library for building web components, originated from Google's Polymer project and is now an OpenJS Foundation Impact Project. Google and other companies like Adobe and Reddit are involved in its governance. - Instead of a virtual DOM, Lit uses tagged template literals to create and update DOM nodes, which can be more performant for subsequent renders after the initial one. This approach allows Lit to analyze the template and only update the parts that have changed. - Lit's reactive properties are a combination of React's state and props; they can trigger a component's lifecycle and re-render the component when their values change. - The introduction of `@lit-labs/signals` provides a way to manage shared, observable state across multiple components. When a signal's value changes, any component that depends on it is automatically updated. This enables more targeted, "pinpoint" DOM updates. - Lit components are built on Web Component standards, making them framework-agnostic. This allows them to be used in projects with other frameworks or no framework at all. - While React has a significantly larger user base with over 20 million weekly npm downloads compared to Lit's nearly 1 million, Lit has a much smaller gzipped bundle size of about 6kB. - In some benchmarks, Lit's templating system, lit-html, has shown to be 8-10% faster than React's virtual DOM in worst-case scenarios and over 50% faster in more common use cases. However, other tests indicate that for initial renders, Lit can be slower than Preact or React. - Lit has first-class TypeScript support, as it is written in TypeScript and the Lit team recommends its use.
