Thomas Camlong
7e961d3da4
A static audit of every widget (scripts/benchmarks/audit-widget-render.mjs, added here)
found this: PercentCell was declared inside the widget body, which makes it a new component
type on every render. React cannot match a new type to the previous one, so it unmounted and
remounted every cell's subtree - Group, Text and Progress - instead of updating it. The
widget re-renders about once a second from its live Beszel subscription, and the cell is used
by three columns, so that was three subtrees per system torn down and rebuilt every second.
Hoisted to module scope and wrapped in memo. `size` is now passed as a prop; it was the only
thing the nested version closed over.
The audit covers all widget .tsx files and ranks findings by whether they sit inside a
.map(), since those multiply by row count:
29 inline-style-per-row
12 overlay-per-row
11 index-key
2 nested-component
Deliberately not fixing the other 52 yet. The 29 inline styles are the least likely to
matter - a fresh object per row only defeats memoisation if the child is memoised, and mostly
these are not - so changing 29 call sites would be churn without a measurement to justify it.
The 11 index keys are only harmful where a list reorders, which needs checking per widget. The
remaining overlay-per-row sites are the same pattern already fixed twice (context menus, then
media-release tooltips) and are the most likely to be worth it: calendar mounts 42 Popovers
and downloads 30 Tooltips, both confirmed at runtime.
Not measured: the mechanism is certain but the size depends on how often the widget renders
and how many systems are in the table.
Live Demo 🎮 • Install 💻 • Translations 🈺 • Discord 👋
- 🖌️ Highly customizable with an extensive drag and drop grid system
- ✨ Integrates seamlessly with your favorite self-hosted applications
- 📌 Easy and fast app management - no YAML involved
- 👤 Detailed and easy to use user management with permissions and groups
- 👥 Support for single sign on via OIDC / LDAP
- 🙊 Safe encryption using BCrypt and AES-256-CBC for your valuable data
- 🕔 Realtime widget updates using WebSockets, tRPC and Redis
- 🔍 Search through thousands of data points in supported integrations or your data in Homarr using the fast built-in search
- 🦞 Icon picker with over 11K icons
- 🚀 Compatible with any major consumer hardware (x86, Raspberry Pi, old laptops, ...) and most OS (Windows, Linux, TrueNAS, Unraid)
- 🖥️ Extensive Kubernetes support with Helm for efficient scaling & high reliability
Please click here for official installation instructions
Homarr is a free-to-use open source project maintained by volunteers and developers from all over the world.
We publish under the Apache License 2.0 license which allows commercial usage.
We invest multiple hours daily in providing support, developing Homarr, integrating to third party software and more.
We also pay for licensing and server hosting fees.
Please consider helping us cover these costs to enable the future development of Homarr. Thank you!
Please click here to sponsor us at OpenCollective
You can also support us by helping with translating the entire project to as many languages as possible or contributing directly to the code or documentation. Please read our Contribution Guidelines. All contributions, regardless of their size or scope, are welcome and highly appreciated! Thank you ❤️
Sponsors
Thanks to your generous sponsors, we can continue to build Homarr. Check them out for high-quality and easy-to-use development tools. Feel free to contact us at homarr-labs@proton.me if you wish to become a sponsor.
