question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update the package using the clsx implementation?

See original GitHub issue

clsx by @clsx provides an interesting improvement over the actual classnames package implementation, it’s faster and lighter. He has done an awesome job!

However, given how popular classnames is and the relatively small performance improvement of clsx compare to the other dependency we are dealing with (often ~10 kB gzipped & ~10k ops/s). I have some doubt about the advantage of migrating from classnames to clsx: https://github.com/mui-org/material-ui/pull/14152. It’s very likely that people will see classnames and clsx in their bundle, resulting in a negative outcome.

@JedWatson Do you have any plan updating this package implementation using clsx as inspiration? I think that it’s a path that would really benefit the React community. Thank you.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:19
  • Comments:17 (4 by maintainers)

github_iconTop GitHub Comments

23reactions
JedWatsoncommented, Mar 7, 2019

Thanks for raising this @oliviertassinari

I’ve read through the clsx implementation and have some questions - it is probably faster because it does a lot less safety checks (e.g skips hasOwnProperty and Array.isArray in favour of detecting .push on objects)

Things like that make me concerned because although it’s faster and lighter, it’s pretty easy to imagine those shortcuts causing problems out there in the real world.

So I wouldn’t take the implementation directly but will see if any other optimisations can be made safely. If anyone else wants to suggest something please do.

As a side-note, someone kindly reached out to me and pointed out that I’ve been missing a bunch of notifications from this repo and it really deserves some love, so I’m fixing that ❤️

12reactions
xobotyicommented, Mar 1, 2019

You probably missed the point of open source.

Oh i get the point right… Changes i’ve planned to make were equal to creating whole thing from scratch (codebases completely different).
So I’m wasting my time - while working i’m getting money for it, while open-source developing i’m getting… lets call it “the fame”.
If i’ll make a PR - i wont be in collaborators or elsewhere on front page, only in commits and PR history. If there wont be my name on it - it completely does not worth my time.

The point of opensource is to workfor credits, instead of money. Work for completely nothing even if you joy it… well… it’s quite stupid when you can have some benefit from it. Even if it wont work out - at least you’ve tried.

Read more comments on GitHub >

github_iconTop Results From Across the Web

clsx - npm
A tiny (228B) utility for constructing className strings conditionally.. Latest version: 1.2.1, last published: 6 months ago. Start using ...
Read more >
Replace clsx, classnames or classcat with your own little helper
Today I'll be refactoring, and improving, a popular package called clsx (also classnames and others). Planning. With clsx you can pass a bunch ......
Read more >
How to use clsx in React - Stack Overflow
clsx is generally used to conditionally apply a given className. This syntax means that some class will only be applied if a given...
Read more >
Top 5 clsx Code Examples - Snyk
To help you get started, we've selected a few clsx examples, based on popular ways it is used in public projects. Secure your...
Read more >
Conditional Class Rendering in React using CLSX - Janith Silva
clsx () function from the package of the same name is a JavaScript utility used to set up conditions for setting the value...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found