Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) #39096

Merged
merged 18 commits into from
Dec 6, 2023

Conversation

mj12albert
Copy link
Member

@mj12albert mj12albert commented Sep 21, 2023

From #36119 (comment), #38723 (comment), could be a prerequisite for #38972

Components (or hooks) that use useControllableReducer accept controlled props, which should remain controlled (or uncontrolled) for its lifetime, but currently does not throw an error when it happens like in useControlled

This PR adds an equivalent warning by "watching" all the keys in controlledProps

@mj12albert mj12albert added the package: base-ui Specific to @mui/base label Sep 21, 2023
@mui-bot
Copy link

mui-bot commented Sep 21, 2023

Netlify deploy preview

https://deploy-preview-39096--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against aa172e4

@mj12albert mj12albert force-pushed the use-controllable-reducer-warning branch from 35f31d6 to 4d684e4 Compare September 21, 2023 15:18
@mj12albert
Copy link
Member Author

This is just a naive implementation, but useControllableReducer should have a warning like this similar to useControlled right? @michaldudak

I noticed it could be a prerequisite for #38972 CC @DiegoAndai

(controlledProps as Record<string, unknown>)[key] === undefined
) {
console.error(
'MUI: useControllableReducer is changing a controlled prop to be uncontrolled',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add the prop name here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah 👍 I will also pass in the component name too, as useControllableReducer is likely to be unhelpful for the user that needs to see the error ~

@DiegoAndai
Copy link
Member

I noticed it could be a prerequisite for #38972

Why is this? 🤔

@mj12albert
Copy link
Member Author

Why is this? 🤔

The v5 Select uses useControlled here which has an equivalent warning, but refactoring with useSelect will remove useControlled as it uses a reducer internally

(Though this is a just a feature for dev mode so it's not necessarily a huge blocker ~)

@mj12albert mj12albert force-pushed the use-controllable-reducer-warning branch 3 times, most recently from e10408c to 8e6949f Compare October 12, 2023 11:28
@mj12albert
Copy link
Member Author

Getting some browser test errors after trying to pass variables to the error message 🧐
https://app.circleci.com/pipelines/github/mui/material-ui/111146/workflows/eaad357c-d29c-494f-ac0c-c4beec54c32a/jobs/596055/parallel-runs/0/steps/0-112

@mj12albert mj12albert changed the title [POC][base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) [base-ui] useControllableReducer warns when controlled props become uncontrolled (and vice versa) Oct 12, 2023
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 26, 2023
@mj12albert mj12albert force-pushed the use-controllable-reducer-warning branch from 8e6949f to bb1e0b8 Compare November 23, 2023 12:43
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 23, 2023
@mj12albert mj12albert force-pushed the use-controllable-reducer-warning branch 3 times, most recently from 4babb7c to c4221ed Compare November 28, 2023 04:49
@mj12albert mj12albert marked this pull request as ready for review November 28, 2023 06:35
@mj12albert mj12albert force-pushed the use-controllable-reducer-warning branch from c4221ed to ab90257 Compare November 28, 2023 12:19
@mj12albert
Copy link
Member Author

mj12albert commented Nov 28, 2023

Finally got it to work by leaving it for a while, then the mysterious failing test just stopped failing 😓

Open to suggestions for a more ergonomic way to pass the componentName! Though I don't expect too many components to have to pass it through 2 hooks like useSelect > useList

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Architecture looks good to me 🚀

The only thing I'm not 100% convinced is the componentName name. What about debugLabel or something like that which denotes that it's used for debugging.

@mj12albert
Copy link
Member Author

mj12albert commented Dec 4, 2023

The only thing I'm not 100% convinced is the componentName name

Totally agree it's not the best name but there was kind of already a precedent 🙈 https://github.com/mui/material-ui/blob/master/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts#L98C2-L101 😅 @DiegoAndai

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mj12albert lets go with componentName then 😅

Left a question

packages/mui-base/src/useTab/useTab.test.tsx Show resolved Hide resolved
@mj12albert
Copy link
Member Author

CC @michaldudak to have a look and see if I missed anything 🙏

@mj12albert
Copy link
Member Author

I've added more commits to fix other tests that were failing

@mj12albert
Copy link
Member Author

I will merge this first as Michal is off for a while, and so I don't have to keep fixing tests 😅

@mj12albert mj12albert merged commit 0d65e67 into mui:master Dec 6, 2023
22 checks passed
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Dec 6, 2023
@mj12albert mj12albert deleted the use-controllable-reducer-warning branch December 7, 2023 07:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants