Skip to content

Commit fb21c43

Browse files
fix: remove eslint exception in RendererProvider (#566)
* fix: make RendererProvider isomorphic without disabling lint rules Moves the `canUseDOM()` call inside the `useMemo()` hook, allowing RendererProvider to work without disabling React hooks linting and therefore potential React Compiler optimizations. * Change files --------- Co-authored-by: Oleksandr Fediashov <[email protected]>
1 parent 4436d63 commit fb21c43

File tree

2 files changed

+11
-9
lines changed

2 files changed

+11
-9
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "patch",
3+
"comment": "fix: make RendererProvider compatible with React Compiler",
4+
"packageName": "@griffel/react",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

packages/react/src/RendererContext.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,13 @@ const RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer()
2828
* @public
2929
*/
3030
export const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {
31-
'use no memo';
32-
33-
if (canUseDOM()) {
34-
// This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
35-
// mounting.
36-
// eslint-disable-next-line react-hooks/rules-of-hooks
37-
React.useMemo(() => {
31+
React.useMemo(() => {
32+
if (canUseDOM()) {
3833
// "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
3934
// avoid double insertion of classes
4035
rehydrateRendererCache(renderer, targetDocument);
41-
}, [renderer, targetDocument]);
42-
}
36+
}
37+
}, [renderer, targetDocument]);
4338

4439
return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;
4540
};

0 commit comments

Comments
 (0)