On the surface, SolidJS and React appear to be closely related. The client-side frameworks are mutually intelligible and are both used to create single-page applications (SPAs). While the developer experience is nearly identical for both, the underlying mechanisms of each framework are a remarkable contrast. Both SPA frameworks are responsible for compartmentalizing an app’s webpage structure and functionality, but in a browser, these frameworks manipulate pages’ HTML elements differently to deliver the desired user experience. SolidJS and React diverge in their use of the Document Object Model (DOM). Let’s expand on how React and SolidJS components allow application logic to mimic a multi-page website. Component Structure React and SolidJS have exactly the same programmatic structures and support for components (individual, reusable pieces of code). In both modern React and SolidJS, a component consists of a render function with properties as arguments. Together with each component’s JSX, the code is tight and succinct. JSX is easy to grok, and allows experienced developers to visually describe a component’s model in its definition. React and SolidJS offer the same components, but each framework has a unique rendering approach. React components render every time (barring memoization use), while SolidJS components only render once. Another difference between the two frameworks is their varying features that enable component functionality. Performance SolidsJS and React have performance differences that reach beyond their approaches to memoization. The two languages approach HTML manipulation in very different ways. The focal point of this difference is how each updates the browser DOM. React’s founder gave it a lightweight virtual DOM to interface with the browser’s actual DOM. React’s code causes its own virtual DOM to update as components render. React then compares the updated virtual DOM against the browser’s DOM, and the identified changes bleed through into the actual page structure (i.e., the DOM). We could argue that—because React re-renders components by default, relying on DOM difference calculations for updates—React is doing its work twice. Since it renders components every time, React requires memoization to avoid unnecessary, repetitive computations. In contrast, SolidJS’s founder managed to dodge all of this round-tripping. By using a mechanism called fine-grained reactivity to directly manipulate the browser’s DOM, SolidJS delivers a much lighter memory footprint and a blazingly fast application of page edits and injected code. Fine-grained reactivity tracks variable interdependencies. Based on variable dependency and edit chains, SolidJS limits our page structure updates to reflect only what has changed, bypassing unnecessary component renders. This results in a massive performance improvement over React. Though I am tempted to end the article here and say that SolidJS is the clear winner due to its speediness, it remains important to discuss how the two frameworks stack up in terms of developer efficiency.