-
Notifications
You must be signed in to change notification settings - Fork 1.3k
chore: Update eslint plugin react hooks followup #9054
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: update-eslint-plugin-react-hooks
Are you sure you want to change the base?
chore: Update eslint plugin react hooks followup #9054
Conversation
Build successful! 🎉 |
|
||
// Use a random drag type so the items can only be reordered within this list and not dragged elsewhere. | ||
let dragType = React.useMemo(() => `keys-${Math.random().toString(36).slice(2)}`, []); | ||
let dragType = React.useMemo(() => randomDragTypeReorderExample, []); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
there's a lot of these, i just moved the random generator out of the component, that should be fine because you couldn't drag between different examples this way either and I don't think we render the same one twice as an example
ref2 = useRef(null); | ||
let internalRef1 = useRef(null); | ||
let internalRef2 = useRef(null); | ||
useEffect(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
other option i guess would be to exclude the compiler from running on test files, but seems better to always be in good habits
}, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]); | ||
|
||
useEffect(() => { | ||
useLayoutEffect(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not sure why this was an effect, it's meant to measure the dom, so layout effect should be more correct
} | ||
}); | ||
|
||
// TODO: Lint doesn't catch these, it thinks we're not in a component render cycle here? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure what to make of this yet, but not going to handle it in this series of PRs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kinda weird that it even catches the other ones, the hook that is being called doesn't create a component like https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components demonstrates but perhaps I'm not understanding quite what React is seeing here. To be safe we could define one for table, tr, td, tbody, and th which should cover it I think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, went ahead and updated them
I'm mostly worried that the compiler isn't looking through these components, so won't do any optimisations
I'll raise an issue with React at some point about it probably
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The other changes look good to me, just one comment
} | ||
}); | ||
|
||
// TODO: Lint doesn't catch these, it thinks we're not in a component render cycle here? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
kinda weird that it even catches the other ones, the hook that is being called doesn't create a component like https://react.dev/reference/eslint-plugin-react-hooks/lints/static-components demonstrates but perhaps I'm not understanding quite what React is seeing here. To be safe we could define one for table, tr, td, tbody, and th which should cover it I think
…ugin-react-hooks-followup
Build successful! 🎉 |
Build successful! 🎉 |
if (prevIsLoading !== isLoading && !isLoading) { | ||
setShowLoading(false); | ||
setPrevIsLoading(isLoading); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah this one felt weird to me as well, but https://react.dev/reference/react/useState#storing-information-from-previous-renders claims it is better than setting state in an effect (which the linter will now complain about)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this one is very annoying, but I'm not sure a better way to do it, we "react" to the change in the prop value, which means we set state in render
we use the showLoading state and count on the new render as a response to the timeout up above, so we need to have some way to "un set it"
had to do it in Combobox as well
}, [leftOffset, popoverContainer]); | ||
let [prevPopoverContainer, setPrevPopoverContainer] = useState<HTMLElement | null>(null); | ||
if (popoverContainer && prevPopoverContainer !== popoverContainer && leftOffset.left === 0) { | ||
let {left} = popoverContainer.getBoundingClientRect(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reading from the DOM during render?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
crud, i missed that one, i'll look at that
…ugin-react-hooks-followup # Conflicts: # packages/react-aria-components/stories/ListBox.stories.tsx
Build successful! 🎉 |
Build successful! 🎉 |
## API Changes
@react-aria/utils/@react-aria/utils:useUpdateEffect useUpdateEffect {
- effect: EffectCallback
+ cb: EffectCallback
dependencies: Array<any>
returnVal: undefined
} @react-spectrum/s2/@react-spectrum/s2:EditableCell EditableCell {
align?: 'start' | 'center' | 'end' = 'start'
children: ReactNode
className?: ClassNameOrFunction<CellRenderProps> = 'react-aria-Cell'
colSpan?: number
id?: Key
isSaving?: boolean
+ onCancel: () => void
onSubmit: () => void
renderEditing: () => ReactNode
showDivider?: boolean
style?: StyleOrFunction<CellRenderProps>
} |
Closes
This PR focused on these rules
'react-hooks/globals': ERROR,
'react-hooks/purity': ERROR,
'react-hooks/set-state-in-effect': ERROR,
'react-hooks/static-components': ERROR,
✅ Pull Request Checklist:
📝 Test Instructions:
🧢 Your Project: