Comments (3)
Hi @olee,
I'm off today. I think your objections come from the fact that you though I was less carefull when implementing this that I actually was.
Please take a few moments to review what the code actully does. If you still think there's a problem after that I will update the code swiftly.
Best
from tss-react.
You are right and wrong a the same time 😄
I checked it in detail once more and noticed you actually only generate "thumbprints" of the passed object for plain objects where the values in the object are only primitives which was a really good consideration and would indeed ensure that the function cannot crash afaik.
However, for ensuring performance in all cases and to be in line with React's rules of hooks, I still think the option I proposed would be more beneficial.
- Using useMemo on the object allows for any structure of object to be optimized
- Json serialization still is a considerable performance impact - especially if you have objects which have many properties
- Your code would produce inconsistent behavior where some types of passed props would be memoized (simple props only without any children, styles or callbacks passed), but most other cases where regular props objects are passed which contain children, arrays, styles or callbacks would not be memoized
Trying to use the option I proposed with using useMemo would be even be destroyed by your code in some cases:
// This code would work with the current memoization, but even though the very same object is passed, the json serialization and all the other checks would still run
const { classes } = useStyles(
useMemo(() => ({
color: props.color,
}), [props.color])
);
// This code would always recompute classes, even if the object is the same
const { classes } = useStyles(
useMemo(() => ({
color: props.color,
componetOptions: {
bold: props.bold,
italic: false,
}
}), [props.color, props.bold])
);
This is why I think it is a better option to stay with "simple is best" here and leave the details to the developer actually implementing the styles 👍
from tss-react.
function cannot crash
It can. Getters can throw exceptions.
Using useMemo on the object allows for any structure of object to be optimized
Big no, I will never recommend implementing this approach. It obfuscates the code and requires additional maintenance for the sake of a very hypothetical performance gain.
Json serialization still is a considerable performance impact - especially if you have objects which have many properties
There is no JSON serialization going on. I used JSON.stringify
(not anymore) only so that { "foo": "3" }
and { "foo": 3 }
wouldn't have the same fingerprint.
Your code would produce inconsistent behavior
No, unpredictable performances.
but most other cases where regular props objects are passed
Passing the props
object directly to useStyles
is not an approach I recommend. I know many peoples do, though. Even I used to because it was suggested in the Material-ui documentation. Well, it's no big deal, if there is a callback in the props the styles are going to be recomputed.
This code would always recompute classes, even if the object is the same
No, it won't.
This is why I think it is a better option to stay with "simple is best"
In the early days of tss-react
I had [a very sophisticated optimization algorithm] (https://github.com/garronej/tss-react/blob/3587bd6f5f088e794787fb03d0f2150521cc2934/src/createUseClassNamesFactory_optimized.ts) in place. It was relying on Proxy
to check what properties were being accessed in useStyles
and prevent subsequent re-computation whenever possible. I ditch this for three reasons:
- It required to have memoizee as a dependency.
- Material-ui's team was starting to show interest for the lib. I wanted the code to be understandable.
- There is already memoization going on with
@emotion/react
. I was unsure what I was doing had an actual significant impact on performances.
Now, all that said, it is very much possible that the optimization currently in place is detrimental for the performances. I didn't do any complexity analysis nor benchmark.
What I can say for sure, though, is that if running this is slower than actually computing the classes then we are optimizing something that doesn't need to be.
Thank you for your input. I'll close this now but you are more than welcome to help me find a solution for withStyles
, it's the only blocker before we can put your cool API for nested selectors in production. I have opened a PR
from tss-react.
Related Issues (20)
- Mui Popper style not applied HOT 2
- Import module error with Vite JS HOT 9
- lint errors with 4.8 but not with 4.7.7 HOT 2
- MUI styles overriding Tss react styles while upgrading to MUI v5 HOT 11
- Mixing multiple classes with nested selectors can lead to undesired output HOT 1
- eslint-plugin-tss-unused-classes detects every class as unused HOT 1
- Missing classname escaping HOT 1
- FOUC when using NextAppDirEmotionCacheProvider with prepend true HOT 8
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.