review comments

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>

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" />
 

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;

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;