React, Preact and Solid

React 7,897 (github.com/react/react (https://github.com/react/react 250,778 )) was open-sourced by Facebook in May 2013, has been governed by the React Foundation (Linux Foundation) since February 2026, and is at version 19.3. Components are functions that return JSX, an HTML-like syntax that a build tool compiles to createElement() calls, and hooks such as useState give them state.

The todo component in React 19 (TodoApp.jsx)JavaScript

import { useState } from 'react';
export default function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');
  const add = () => { setTodos([...todos, text]); setText(''); };
  return (
    <>
      <input value={text} onChange={e => setText(e.target.value)} />
      <button onClick={add}>Add #{todos.length + 1}</button>
      <ul>{todos.map((t, i) => <li key={i}>{t}</li>)}</ul>
    </>
  );
}

Every setTodos call re-runs the function and diffs the result. Never mutate state in place (todos.push(text)): React compares references, sees the same array and skips the update. Create React App 190,986 was deprecated in February 2025; start with npm 2,036 create vite@latest my-app -- --template react or a framework such as Next.js 10,514 . The React Compiler (stable since October 2025) memoizes automatically.

Preact 268,577 (github.com/preactjs/preact (https://github.com/preactjs/preact 38,892 )) offers the same hooks API in a far smaller runtime: the component above is about 5 KB gzipped with Preact 10.29 against 66 KB with React. Aliasing react to preact/compat lets most React libraries run unchanged.

Solid 269,718 (github.com/solidjs/solid (https://github.com/solidjs/solid 36,074 )) also uses JSX but no virtual DOM. Its compiler turns JSX into real DOM templates, and signals update only the text node or attribute that reads them.

The same component in Solid 1.9: signals are getter functionsJavaScript

import { createSignal, For } from 'solid-js';
export default function TodoApp() {
  const [todos, setTodos] = createSignal([]);
  const [text, setText] = createSignal('');
  const add = () => { setTodos([...todos(), text()]); setText(''); };
  return (
    <>
      <input value={text()} onInput={e => setText(e.target.value)} />
      <button onClick={add}>Add #{todos().length + 1}</button>
      <ul><For each={todos()}>{t => <li>{t}</li>}</For></ul>
    </>
  );
}

MENU