Lit and React both have a place in the web toolbelt, but each solves different problems for different teams.
React and web component libraries like Lit are often framed as competitors, but that’s unfair to both libraries. They can solve the same problems with different approaches. Where React is often used to create entire apps or experiences, Lit excels at helping engineering teams develop components that are capable of working across any app.
Before diving into both libraries, it’s important to remember that React components and Lit web components are distinct from one another. Although they both use the term “components,” React components are JavaScript functions or classes, and they only exist during React runtime. Lit web components, in contrast, compile down to native custom HTML elements, which are a web standard, and therefore are part of the DOM itself. If you extract a React component and a Lit web component from their respective projects, put them into a plain HTML file, you’ll see that the React component wouldn’t be able to run without the React runtime or your component logic, and the Lit web component could run with just a script tag that contains the component definition.
What React does well
React is the go-to tool for lots of teams, but what problems is it really excellent at solving? Knowing the types of benefits React offers makes it easier to compare to your own projects so that you don’t just pick up React out of habit or popularity. A few potential benefits are worth highlighting.
Complex State Management
If your next project has complex state management, React may be a great option for you. For instance, let’s say your app is some type of e-commerce platform. You want to support individual user accounts with personalized data and persistent sessions. Based on a user’s activity, maybe you expect certain UI elements to frequently update, interconnecting many elements of the app. React’s built-in capabilities to share state across components, or to use context and/or a reducer to pass state into children, makes connecting those UI elements easier. Without the state management options React offers, a team would have to manually write JavaScript for each state update, and while that is possible, it would be terribly time-consuming and error-prone to maintain.
Full-stack Support
Depending on your needs, React has an expanded ecosystem of full-stack frameworks. Frameworks like Next.js or Expo provide options for client-side rendering or server-side rendering, allowing you to asynchronously fetch data from APIs. Although separate from the main React library, full-stack frameworks are common and have support in many areas, with the React team detailing framework features and well-documented usage.
What Lit does well
Lit is a lightweight library built to help author web components. When considering the use of React or Lit in your next project, remember that the two libraries serve separate purposes. Lit might offer some genuine advantages to your project.
Design Systems
Lit components are self-contained and web standards-based. With Lit, web components can be created to work across multiple frameworks. So in design systems work, particularly design systems for organizations with mixed tech stacks, Lit allows teams to create base components or widgets that can be used in a variety of downstream projects. Those downstream projects might include legacy systems, or ones already written in React, Vue, or plain HTML. Lit components are capable of providing rich experiences, like state and event management, with the added advantages of being framework-agnostic and having encapsulated styling.
Incremental Enhancements to Existing Systems
Lit components can be dropped into any existing project, from Eleventy statically-generated sites to server-rendered CMS sites. They can render semantic, functional HTML before JS has even loaded, a key pillar to progressive enhancement (making sure that the core functionality of a component or site is addressed regardless of user device). Once a Lit component has been written, for example an accordion, it can be added directly into the HTML. Because Lit components are built on the browser’s component model, the browser can recognize their markup automatically, and enable their functionality once they’re registered via JavaScript. Your project won’t need to adopt anything new or restructure anything just to add small, interactive enhancements.
Tradeoffs
It’s not enough to just know the potential benefits of Lit or React. Each library has its tradeoffs and considerations. For instance, although React has a large community and has developer familiarity, it’s a large, mature JavaScript library that might be too big for simple use cases. When React releases major version updates, a project might need to be rewritten in some fashion to conform with those updates, too. On the other hand, Lit is a much smaller community, and frontend web components are still gaining adoption among frontend web developers. Web components are baked into specifications, making those unlikely to change dramatically over long periods of time. However, shadow DOM management reveals gaps in understanding (like styling or event handling), and a feature like server-side rendering is still actively experimental. A team must always intentionally weigh the importance of being coupled to a technology’s conventions.
They are complementary
At their core, Lit and React are just different products. Lit components sit a step closer to the browser, while React components are abstracted further away. When making technical stack decisions for a project, team familiarity or consistent tooling across a monorepo are considerations that can help your project get moving more quickly. And switching technologies for the sake of using something new is a big cost that may not always be justified. Teams don’t have to choose between React or web components exclusively, either. With Lit’s ability to integrate into any existing application, if your need is small and scoped enough, you could even add a Lit component to your React app.
As always, it’s best to consider all the tools at your disposal. Weigh the pros and cons, and choose what works best based on your needs.
