[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3800":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":18,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":22,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":41,"readmeContent":42,"aiSummary":43,"trendingCount":16,"starSnapshotCount":16,"syncStatus":15,"lastSyncTime":44,"discoverSource":45},3800,"million","aidenybai\u002Fmillion","aidenybai","Optimizing compiler for React","https:\u002F\u002Fold.million.dev\u002F",null,"TypeScript",17570,593,61,2,0,1,3,20,73.82,"MIT License",false,"main",[25,26,27,28,29,5,30,31,32,33,34,35,36,37,38,39,40],"best-practices","blockdom","compiler","hacktoberfest","memo","millionjs","optimization","optimize","performance","preact","react","react-hooks","react-optimize","renderer","rendering","virtual-dom","2026-06-12 04:00:19","> I'm working on something new (still free + open source!)\n> \n> React Grab allows you to select an element and copy its context (like HTML, React component, and file source)\n>\n> Check it out: [**react-grab.com**](https:\u002F\u002Freact-grab.com)\n\n\u003Ca href=\"https:\u002F\u002Fmillion.dev\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Faidenybai\u002Fmillion\u002Fmain\u002F.github\u002Fassets\u002Fbanner.png\" alt=\"Million.js Banner\" \u002F>\n\u003C\u002Fa>\n\n\u003Cdiv align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Faidenybai\u002Fmillion\u002Fci.yml?branch=main\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Factions\u002Fworkflow\u002Fstatus\u002Faidenybai\u002Fmillion\u002Fci.yml?branch=main&style=flat&colorA=000000&colorB=000000\" alt=\"CI\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmillion\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fmillion?style=flat&colorA=000000&colorB=000000\" alt=\"NPM Version\" \u002F>\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fmillion\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fmillion.svg?style=flat&colorA=000000&colorB=000000\" alt=\"NPM Downloads\" \u002F>\u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FX9yFbcV2rF\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F938129049539186758?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff\" \u002F>\u003C\u002Fa>\n\n\u003Ctable>\n    \u003Ctbody>\n      \u003Ctr>\n        \u003Ctd>\n          \u003Ca href=\"https:\u002F\u002Fmillion.dev\u002Fdocs\u002Fintroduction\">📚 Read the docs\u003C\u002Fa>\n        \u003C\u002Ftd>\n        \u003Ctd>\n          \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=VkezQMb1DHw\">🎦 Watch video\u003C\u002Fa>\n        \u003C\u002Ftd>\n        \u003Ctd>\n          \u003Ca href=\"https:\u002F\u002Fmillion.dev\u002Fchat\">💬 Join our Discord\u003C\u002Fa>\n        \u003C\u002Ftd>\n        \u003Ctd>\n          \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fmilliondotjs\">🌐 Follow on Twitter\u003C\u002Fa>\n        \u003C\u002Ftd>\n      \u003C\u002Ftr>\n    \u003C\u002Ftbody>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n\n## What is Million.js?\n\nMillion.js is an extremely fast and lightweight optimizing compiler that make [components](https:\u002F\u002Freact.dev) up to [_**70% faster**_](https:\u002F\u002Fkrausest.github.io\u002Fjs-framework-benchmark\u002Fcurrent.html).\n\n> Oh man... Another [`\u002Fvirtual dom|javascript\u002Fgi`](https:\u002F\u002Fregexr.com\u002F6mr5f) framework? I'm fine with [React](https:\u002F\u002Freactjs.org) already, why do I need this?\n\nMillion.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing ([_try it out here_](https:\u002F\u002Fdemo.million.dev))\n\n**TL;DR:** Imagine [React](https:\u002F\u002Freact.dev) components running at the speed of raw JavaScript.\n\n### [**👉 Setup Million.js in seconds! →**](https:\u002F\u002Fmillion.dev\u002F)\n\n## Installation\n\nThe Million.js CLI will automatically install the package and configure your project for you.\n\n```bash\nnpx million@latest\n```\n\nOnce your down, just run your project and information should show up in your command line!\n\n> Having issues installing? [**→ View the installation guide**](https:\u002F\u002Fmillion.dev\u002Fdocs\u002Finstall)\n\n## Why Million.js?\n\nTo understand why to use Million.js, we need to understand how React updates interfaces. When an application's state or props change, React undergoes an update in two parts: rendering and reconciliation.\n\nTo show this, let's say this is our `App`:\n\n```jsx\nfunction App() {\n  const [count, setCount] = useState(0);\n  const increment = () => setCount(count + 1);\n  return (\n    \u003Cdiv>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={increment}>Increment\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\nIn this `App`, when I click on the button, the `count` state will update and the `\u003Cp>` tag will update to reflect the new value. Let's break this down.\n\n### Rendering\n\nThe first step is rendering. Rendering is the process of generating a snapshot of the current component. You can imagine it as simply \"calling\" the `App` function and storing the output in a variable. This is what the `App` snapshot would look like:\n\n```jsx\nconst snapshot = App();\n\n\u002F\u002F snapshot =\n\u003Cdiv>\n  \u003Cp>Count: 1\u003C\u002Fp>\n  \u003Cbutton onClick={increment}>Increment\u003C\u002Fbutton>\n\u003C\u002Fdiv>;\n```\n\n### Reconciliation\n\nIn order to update the interface to reflect the new state, React needs to compare the previous snapshot to the new snapshot (_called \"diffing\"_). React's reconciler will go to each element in the previous snapshot and compare it to the new snapshot. If the element is the same, it will skip it. If the element is different, it will update it.\n\n- The `\u003Cdiv>` tag is the same, so it doesn't need to be updated. ✅\n  - The `\u003Cp>` tag is the same, so it doesn't needs to be updated. ✅\n    - The text inside the `\u003Cp>` tag is different, so it needs to be updated. ⚠ ️\n  - The `\u003Cbutton>` tag is the same, so it doesn't need to be updated. ✅\n    - The `onClick` prop is the same, so it doesn't need to be updated. ✅\n    - The text inside the `\u003Cbutton>` tag is the same, so it doesn't need to be updated. ✅\n\n_(total: 6 diff checks)_\n\n```diff\n\u003Cdiv>\n-  \u003Cp>Count: 0\u003C\u002Fp>\n+  \u003Cp>Count: 1\u003C\u002Fp>\n  \u003Cbutton onClick={increment}>Increment\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n```\n\nFrom here, we can see that the `\u003Cp>` tag needs to be updated. React will then update the `\u003Cp>` DOM node to reflect the new value.\n\n```jsx\n\u003Cp>.innerHTML = `Count: ${count}`;\n```\n\n### How Million.js makes this faster\n\nReact is slow.\n\nThe issue with React's reconciliation it becomes **exponentially slower** the more JSX elements you have. With this simple `App`, it only needs to diff a few elements. In a real world React app, you can easily have hundreds of elements, slowing down interface updates.\n\nMillion.js solves this by **skipping the diffing step entirely** and directly updating the DOM node.\n\nHere is a conceptual example of how Million.js reconciler works:\n\n```jsx\nfunction App() {\n  const [count, setCount] = useState(0);\n  const increment = () => setCount(count + 1);\n\n  \u002F\u002F generated by compiler\n  if (count !== prevCount) {\n    \u003Cp>.innerHTML = `Count: ${count}`;\n  }\n\n  \u003Cbutton>.onclick = increment;\n\n  \u002F\u002F ...\n}\n```\n\nNotice how when the `count` is updated, Million.js will directly update the DOM node. Million.js turns React reconciliation from `O(n)` (linear time) to `O(1)` (constant time).\n\n> How fast is it? [**→ View the benchmarks**](https:\u002F\u002Fkrausest.github.io\u002Fjs-framework-benchmark\u002Fcurrent.html)\n\n## Resources & Contributing Back\n\nLooking for the docs? Check the [documentation](https:\u002F\u002Fmillion.dev) or the [Contributing Guide](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fblob\u002Fmain\u002F.github\u002FCONTRIBUTING.md) out. We also recommend reading [_Virtual DOM: Back in Block_](https:\u002F\u002Fmillion.dev\u002Fblog\u002Fvirtual-dom) to learn more about Million.js's internals.\n\nWant to talk to the community? Hop in our [Discord](https:\u002F\u002Fdiscord.gg\u002FX9yFbcV2rF) and share your ideas and what you've build with Million.js.\n\nFind a bug? Head over to our [issue tracker](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fissues) and we'll do our best to help. We love pull requests, too!\n\nWe expect all Million.js contributors to abide by the terms of our [Code of Conduct](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fblob\u002Fmain\u002F.github\u002FCODE_OF_CONDUCT.md).\n\n[**→ Start contributing on GitHub**](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fblob\u002Fmain\u002F.github\u002FCONTRIBUTING.md)\n\n![Alt](https:\u002F\u002Frepobeats.axiom.co\u002Fapi\u002Fembed\u002F74a4b271e2a24c2cb08c897cfc1dfe155e0e1c1e.svg 'Repobeats analytics image')\n\n## Codebase\n\nThis repo is a \"mono-repo\" with modules. Million.js ships as one NPM package, but has first class modules for more complex, but important extensions. Each module has its own folder in the `\u002Fpackages` directory.\n\nYou can also track our progress through our [Roadmap](https:\u002F\u002Fgithub.com\u002Fusers\u002Faidenybai\u002Fprojects\u002F5\u002Fviews\u002F1?layout=roadmap).\n\n| Module                                                                                                                                                            | Description                                         |\n| ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |\n| [`million`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Fmillion)                                                                                      | The main Virtual DOM with all of Million.js's core. |\n| [`react`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Freact) \u002F [`react-server`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Freact-server) | React compatibility for Million.js.                 |\n| [`compiler`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Fcompiler)                                                                                    | The compiler for Million.js in React.               |\n| [`jsx-runtime`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Fjsx-runtime)                                                                              | A simple JSX runtime for Million.js core.           |\n| [`types`](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Ftree\u002Fmain\u002Fpackages\u002Ftypes)                                                                                          | Shared types between packages                       |\n\n## Sponsors\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Faidenybai\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Faidenybai\u002Faidenybai\u002Fmaster\u002Fsponsors.svg\" \u002F>\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fvercel.com?utm_source=millionjs&utm_campaign=oss\">\u003Cimg height=\"30\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Fabumalick\u002Fpowered-by-vercel\u002Fmaster\u002Fpowered-by-vercel.svg\" \u002F>\u003C\u002Fa>\n\u003C\u002Fp>\n\n## Acknowledgments\n\nMillion.js takes heavy inspiration from the following projects:\n\n- [`blockdom`](https:\u002F\u002Fgithub.com\u002Fged-odoo\u002Fblockdom) ([Géry Debongnie](https:\u002F\u002Fgithub.com\u002Fged-odoo))\n  Thank you to Géry pioneering the concept of \"blocks\" in the virtual DOM. Many parts of the Million.js codebase either directly or indirectly derive from his work.\n- [`voby`](https:\u002F\u002Fgithub.com\u002Fvobyjs\u002Fvoby) ([Fabio Spampinato](https:\u002F\u002Fgithub.com\u002Ffabiospampinato))\n  The Million.js \"template\" concept is derived from Voby's `template()` API.\n- [Hack the Wave](https:\u002F\u002Fhackthewave.com) ([Melinda Chang](https:\u002F\u002Fgithub.com\u002Fmelindachang)) for their homepage.\n- [`react`](https:\u002F\u002Freact.dev) and [`turbo`](https:\u002F\u002Fturbo.build) for their documentation. Many parts of the current Million.js documentation are grokked and modified from theirs.\n- [`ivi`](https:\u002F\u002Fgithub.com\u002Flocalvoid\u002Fivi), [Preact](https:\u002F\u002Fgithub.com\u002Fpreactjs\u002Fpreact), [and more](https:\u002F\u002Fkrausest.github.io\u002Fjs-framework-benchmark\u002F2021\u002Ftable_chrome_96.0.4664.45.html)\n\n## License\n\nMillion.js is [MIT-licensed](LICENSE) open-source software by [Aiden Bai](https:\u002F\u002Faiden.mov) and [contributors](https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fgraphs\u002Fcontributors):\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Faidenybai\u002Fmillion\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=aidenybai\u002Fmillion\" \u002F>\n\u003C\u002Fa>\n","Million.js 是一个针对 React 的优化编译器，旨在显著提升组件渲染速度。其核心功能包括通过高度优化的虚拟DOM减少差异计算开销，从而使得基于React的应用程序性能提高多达70%。该项目采用TypeScript编写，具备强大的编译优化能力与良好的兼容性，特别适用于需要高性能用户界面响应速度的场景，如复杂的数据可视化、实时交互应用等。它不仅支持现有的React生态系统，还提供了简易的集成方式，便于开发者快速上手并应用于现有项目中。","2026-06-11 02:56:20","top_language"]