From 8bb6a274effef16972f400c802c7958a34e3c251 Mon Sep 17 00:00:00 2001
From: mnajdova <mnajdova@gmail.com>
Date: Fri, 28 Feb 2025 11:48:55 +0100
Subject: [PATCH] review comments

---
 .../render-callback/css-modules/index.tsx      |  7 ++-----
 .../(content)/react/utils/use-render/page.mdx  |  2 +-
 .../react/src/use-render/useRender.test.tsx    |  2 +-
 packages/react/src/use-render/useRender.ts     | 18 +++++++++++-------
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/docs/src/app/(public)/(content)/react/utils/use-render/demos/render-callback/css-modules/index.tsx b/docs/src/app/(public)/(content)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
index 56f6983c21..2a8f47b130 100644
--- a/docs/src/app/(public)/(content)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
+++ b/docs/src/app/(public)/(content)/react/utils/use-render/demos/render-callback/css-modules/index.tsx
@@ -23,7 +23,7 @@ function Counter(props: CounterProps) {
     state,
     props: {
       ...otherProps,
-      className: `${className} ${styles.Button}`,
+      className: `${styles.Button} ${className ?? ''}`,
       type: 'button',
       children: (
         <React.Fragment>
@@ -42,10 +42,7 @@ export default function ExampleCounter() {
   return (
     <Counter
       render={(props, state) => (
-        <button
-          {...props}
-          className={`${state.odd ? styles.odd : styles.even} ${props.className}`}
-        >
+        <button {...props}>
           {props.children}
           <span className={styles.suffix}>{state.odd ? '👎' : '👍'}</span>
         </button>
diff --git a/docs/src/app/(public)/(content)/react/utils/use-render/page.mdx b/docs/src/app/(public)/(content)/react/utils/use-render/page.mdx
index 1fd67a92f1..d79dd5e297 100644
--- a/docs/src/app/(public)/(content)/react/utils/use-render/page.mdx
+++ b/docs/src/app/(public)/(content)/react/utils/use-render/page.mdx
@@ -39,7 +39,7 @@ This is an example of a Text component supporting the `render` prop.
 
 <Demo path="./demos/render" />
 
-Developers can also use the callback version of the `render` prop.
+Developers can also use the callback version of the `render` prop to access the internal `state` of a component.
 
 <Demo path="./demos/render-callback" />
 
diff --git a/packages/react/src/use-render/useRender.test.tsx b/packages/react/src/use-render/useRender.test.tsx
index d5b4e7f423..bd264c4baa 100644
--- a/packages/react/src/use-render/useRender.test.tsx
+++ b/packages/react/src/use-render/useRender.test.tsx
@@ -8,7 +8,7 @@ describe('useRender', () => {
 
   it('render props does not overwrite className in a render function when unspecified', async () => {
     function TestComponent(props: {
-      render: useRender.Settings<Element>['render'];
+      render: useRender.Settings<{}, Element>['render'];
       className?: string;
     }) {
       const { render: renderProp, className } = props;
diff --git a/packages/react/src/use-render/useRender.ts b/packages/react/src/use-render/useRender.ts
index c2d64789cc..c96a813779 100644
--- a/packages/react/src/use-render/useRender.ts
+++ b/packages/react/src/use-render/useRender.ts
@@ -10,23 +10,27 @@ import { CustomStyleHookMapping } from '../utils/getStyleHookProps';
 function useRender<State extends Record<string, unknown>, RenderedElementType extends Element>(
   settings: useRender.Settings<State, RenderedElementType>,
 ) {
-  const { render, props, state = {} } = settings;
+  const { render, props, state } = settings;
   const { ref, ...extraProps } = props ?? {};
 
+  const customStyleHookMapping = React.useMemo(() => {
+    return Object.keys(state ?? {}).reduce((acc, key) => {
+      acc[key as keyof State] = () => null;
+      return acc;
+    }, {} as CustomStyleHookMapping<State>);
+  }, [state]);
+
   return useComponentRenderer({
     render,
-    state: state as State,
+    state: (state ?? {}) as State,
     ref: ref as React.Ref<RenderedElementType>,
     extraProps,
-    customStyleHookMapping: Object.keys(state).reduce((acc, key) => {
-      acc[key as keyof State] = () => null;
-      return acc;
-    }, {} as CustomStyleHookMapping<State>),
+    customStyleHookMapping,
   });
 }
 
 namespace useRender {
-  export type RenderProp<State> =
+  export type RenderProp<State = Record<string, unknown>> =
     | ComponentRenderFn<React.HTMLAttributes<any>, State>
     | React.ReactElement<Record<string, unknown>>
     | keyof typeof defaultRenderFunctions;