Add lint plugin to check for ref access during render #3835
Conversation
| create(context) { | ||
| return { | ||
| MemberExpression(member) { | ||
| // Look for member expressions that look like refs (i.e. `ref.current`). |
There was a problem hiding this comment.
I think we're going to need to look for other things as well, such as virtualizer.delegate or virtualizer.anything really https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/virtualizer/src/useVirtualizerState.ts#L55
we'll also probably want to check if current is being written to or read from inside a useMemo since that's equivalent to render time? https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/collections/src/useCollection.ts#L25
There was a problem hiding this comment.
probably things like our weak maps hook contexts as well
which are hard because we can't just put the writes and reads into useLayoutEffect since the child ones would run before the parent... so they'd always run on stale data
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarBase.ts#L66
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/calendar/src/useCalendarGrid.ts#L125
Relates to #779.
Reading or writing to refs during render doesn't work in strict mode. This adds a lint plugin to detect this. See facebook/react#24506 for more details. Currently the issues are not fixed, so linter will fail. Someone should go through and fix these.