Add warning when switching between controlled and uncontrolled

mui · Nov 23, 2023 · 81e1bf8 · 81e1bf8
1 parent 67f6b6c
commit 81e1bf8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/mui-base/src/utils/useControllableReducer.test.tsx b/packages/mui-base/src/utils/useControllableReducer.test.tsx
@@ -168,7 +168,7 @@ describe('useControllableReducer', () => {
         initialState: { make: 'Mazda', model: '3', productionYear: 2022 },
       };
 
-      function TestComponent(props: { make: string }) {
+      function TestComponent(props: { make?: string }) {
         const [state] = useControllableReducer({
           ...reducerParameters,
           controlledProps: {

diff --git a/packages/mui-base/src/utils/useControllableReducer.ts b/packages/mui-base/src/utils/useControllableReducer.ts
@@ -156,6 +156,33 @@ export function useControllableReducer<
     actionContext,
   } = parameters;
 
+  const controlledPropsRef = React.useRef(controlledProps);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      Object.keys(controlledProps).forEach((key) => {
+        if (
+          (controlledPropsRef.current as Record<string, unknown>)[key] !== undefined &&
+          (controlledProps as Record<string, unknown>)[key] === undefined
+        ) {
+          console.error(
+            'MUI: useControllableReducer is changing a controlled prop to be uncontrolled',
+          );
+        }
+
+        if (
+          (controlledPropsRef.current as Record<string, unknown>)[key] === undefined &&
+          (controlledProps as Record<string, unknown>)[key] !== undefined
+        ) {
+          console.error(
+            'MUI: useControllableReducer is changing an uncontrolled prop to be controlled',
+          );
+        }
+      });
+    }, [controlledProps]);
+  }
+
   // The reducer that is passed to React.useReducer is wrapped with a function that augments the state with controlled values.
   const reducerWithControlledState = React.useCallback(
     (state: State, action: ActionWithContext<Action, ActionContext>) => {