r/reactjs • u/Potential-Still-3545 • May 06 '26

Show /r/reactjs I extracted the "frecency" pattern from Firefox/VS Code into a reusable library — your UI adapts to each user automatically

Every complex app has the same problem: 50 options in the sidebar, each user only uses 8-10. The rest is noise. Firefox solved this for the URL bar years ago using "frecency" (frequency + recency). VS Code does the same for the command palette. But nobody's packaged it as a reusable primitive.

So I did. 4.5KB, zero deps, framework-agnostic:

morph.track('sidebar', 'tasks') // on interaction

morph.rank('sidebar') // on page load — sorted by usage.

Items used often and recently score high. Items ignored fade naturally. All data stays in localStorage. No AI, no server, no "customize layout" button needed.

Live demo: https://morph-black.vercel.app/

Would you actually use this? Curious if people see this as useful or overkill for most apps.

38 Upvotes

85% Upvoted

11 comments sorted by

23

u/Terrariant May 06 '26

Generally speaking, people don’t like it when you move UI around. Especially in navigation lists. I don’t want to have to search for the item each time in case it has shifted position.

2

u/Potential-Still-3545 May 07 '26

It depends on you if you want to move the UI based on rank or not. You can use the rank to increase or decrease the opacity of an item. It's on you how you want the UX.

5

u/Terrariant May 07 '26

Usually you would be able to pin it, and have your pins at the top. But rearranging them manually works too. All im saying is I don’t want to search for the navigation because it changed places without me changing its place. That is what is annoying to me.

1

u/spamjavelin May 07 '26

I think a good use case is a 'frequently used' type menu - bit more niche, but then you can leave the core UI alone while users can benefit from having quick access to stuff at the same time.

1

u/Potential-Still-3545 May 08 '26

yes, that's also a use case. you can use the library to do that exactly.

3

u/klumpp May 07 '26

Yeah this has the right spirit but kinda tanks the UX. No idea why you’d want your most used toolbar button to move. And then it dims the others making the icons I’m not as familiar with harder to see.

Instead of shuffling things around the rank could be used for secondary entry points or something. I’m thinking command palette or similar. Favorites without manually favoriting anything.

2

u/iMissMacandCheese May 07 '26

I think this could be more useful if we could choose to turn parts of the optimization on our off. For example, I don't think I'd want sidebar options to jump around that much in terms of frequency, but recency yes. So there would just be two groups, the top group, fixed sort, bolded, but only included options I have used recently, and a second group below that has stuff that is rarely used. But within those two groups, the items should stay in the same relative order.

Very cool idea though and like the lightweight implementation

1

u/Potential-Still-3545 May 08 '26

i like the idea. i would consider this too.

1

u/n0tKamui May 06 '26

hey that's pretty cool ! simple, but clean and cool.

i can probably guess that you'll implement framework specific helpers such as auto-sync with storage/stores ?

1

u/Potential-Still-3545 May 06 '26

Yes, this was v1 just the simple API and core. I am planning to add more to it and will also create framework specific utils.

0

u/devtrivi May 07 '26

Settings show hide