Can we cache the `makeStyles` internal about griffel

[layershifter]

So currently we cached the hooks result via useMemo. We looked through the source code of makeStyles and find it seems doesn't cache the styles internal. Since the API can only be called in the file root level and the result is static and time consuming, why not cache the result internal?

@Leolewin I don't follow what you're caching in a React component 🤔 After the first expensive pass, a hook returned by makeStyles() will do nothing:

griffel/packages/core/src/makeStyles.ts

Lines 30 to 60 in f134bc6

	function computeClasses(options: MakeStylesOptions): Record<Slots, string> {
	const { dir, renderer } = options;
	if (classesMapBySlot === null) {
	[classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
	}
	const isLTR = dir === 'ltr';
	if (isLTR) {
	if (ltrClassNamesForSlots === null) {
	ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
	}
	} else {
	if (rtlClassNamesForSlots === null) {
	rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
	}
	}
	insertStyles(renderer, cssRules!);
	const classNamesForSlots = isLTR
	? (ltrClassNamesForSlots as Record<Slots, string>)
	: (rtlClassNamesForSlots as Record<Slots, string>);
	if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
	debugData.addSequenceDetails(classNamesForSlots!, sourceURL);
	}
	return classNamesForSlots;
	}

Can you please clarify WDYM?

---

Anyway, yes, makeStyles() and makeResetStyles() are expensive as any other CSS-in-JS, that's why AOT (that removes computation cost) and CSS extraction should be used it in production.

[Leolewin]

So currently we cached the hooks result via useMemo. We looked through the source code of makeStyles and find it seems doesn't cache the styles internal. Since the API can only be called in the file root level and the result is static and time consuming, why not cache the result internal?

@Leolewin I don't follow what you're caching in a React component 🤔 After the first expensive pass, a hook returned by makeStyles() will do nothing:

griffel/packages/core/src/makeStyles.ts

Lines 30 to 60 in f134bc6

	function computeClasses(options: MakeStylesOptions): Record<Slots, string> {
	const { dir, renderer } = options;
	if (classesMapBySlot === null) {
	[classesMapBySlot, cssRules] = resolveStyleRulesForSlots(stylesBySlots);
	}
	const isLTR = dir === 'ltr';
	if (isLTR) {
	if (ltrClassNamesForSlots === null) {
	ltrClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
	}
	} else {
	if (rtlClassNamesForSlots === null) {
	rtlClassNamesForSlots = reduceToClassNameForSlots(classesMapBySlot, dir);
	}
	}
	insertStyles(renderer, cssRules!);
	const classNamesForSlots = isLTR
	? (ltrClassNamesForSlots as Record<Slots, string>)
	: (rtlClassNamesForSlots as Record<Slots, string>);
	if (process.env.NODE_ENV !== 'production' && isDevToolsEnabled) {
	debugData.addSequenceDetails(classNamesForSlots!, sourceURL);
	}
	return classNamesForSlots;
	}

Can you please clarify WDYM?

Anyway, yes, makeStyles() and makeResetStyles() are expensive as any other CSS-in-JS, that's why AOT (that removes computation cost) and CSS extraction should be used it in production.

Hi @layershifter

Sorry for the late reply and the misunderstanding caused by the issue description.

At very beginning, I fond the makeStyles API has large runtime cost. So I tried to use React.useMemo API to cache the styles returned by hook like:

const useStyles = makeStyles({ root: {color: 'red'}});

const Component = (props) => {
    const styles = React.useMemo(() => useStyles());
    // ...
}

But as the codes you mentioned, the large styles computation and stylesheet insertion is just happened in the first time been called. In following re-render time the styles result is get and returned directly from the closure variables. So it has almost zero runtime cost and useMemo will increase the time consuming in this case.

Thanks for your help to resolve my puzzles. Will close this issue.