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

test: Enable react/no-unstable-nested-components #34518

Merged
merged 1 commit into from
Oct 17, 2022

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Sep 29, 2022

Enables react/no-unstable-nested-components

This rule is likely either going to be in the recommended preset or move to rules-of-hooks. Wanted to see how this rule performs on a medium size repo and the errors all look legitimate to me (although it's all just test-code).

@eps1lon eps1lon added the test label Sep 29, 2022
@mui-bot
Copy link

mui-bot commented Sep 29, 2022

No bundle size changes

Generated by 🚫 dangerJS against 4e2156a

@eps1lon eps1lon force-pushed the test/no-unstable-nested-component branch from bfde5b2 to 4e2156a Compare September 29, 2022 17:57
@eps1lon eps1lon marked this pull request as ready for review September 29, 2022 18:19
@@ -23,7 +23,7 @@ const InputInput = React.forwardRef(function InputInput(

const styledInput = <InputUnstyled components={{ Root: InputRoot, Input: InputInput }} />;

const PolymorphicComponentTest = () => {
const polymorphicComponentTest = () => {
Copy link
Member Author

Choose a reason for hiding this comment

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

The idea here is that PolymorphicComponentTest looks like a component (and therefore would allow a hooks call). But inside of it we're declaring new components which is bad. Since it's not actually a component, we adjust the name to reflect that.

Comment on lines +26 to 27
const polymorphicComponentTest = () => {
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
const polymorphicComponentTest = () => {
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
const CustomComponent: React.FC<{ stringProp: string; numberProp: number }> = () => <div />;
const PolymorphicComponentTest = () => {

Would this be better? I know that it produces no difference here since we are not using polymorphicComponentTest but it seems like a component here (or polymorphicComponentTest is not needed at all).

Copy link
Member Author

Choose a reason for hiding this comment

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

I usually keep things specific to a test in its scope before hoisting up. That way other tests don't start to rely on it. Up to you, what you prefer.

Copy link
Member

Choose a reason for hiding this comment

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

I usually keep things specific to a test in its scope before hoisting up

That sounds good to me as well.

Copy link
Member

Choose a reason for hiding this comment

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

I guess we could also disable react/no-unstable-nested-components for the TypeScript tests.

material-ui/.eslintrc.js

Lines 319 to 320 in 101fa0d

files: ['*.spec.tsx', '*.spec.ts'],
rules: {

Copy link
Member Author

Choose a reason for hiding this comment

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

It's still "invalid React". Better to write it correct everywhere.

Copy link
Member

Choose a reason for hiding this comment

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

Fair enough

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 Left one suggestion.

@michaldudak michaldudak merged commit ece62bb into mui:master Oct 17, 2022
@eps1lon eps1lon deleted the test/no-unstable-nested-component branch October 17, 2022 15:26
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants