Fix forwardRef component nested with a memo HOC #15
Conversation
In the case of: memo(forwardRef(SomeComponent)) The memo component would be correctly detected but would assume that it may only contain a class or function component and render it. Instead of rendering the nested component, this fix returns a proper element from the memo component visitor.
Codecov Report
@@ Coverage Diff @@ ## master #15 +/- ## ========================================= - Coverage 97.31% 97.3% -0.01% ========================================= Files 10 10 Lines 484 483 -1 Branches 87 87 ========================================= - Hits 471 470 -1 Misses 9 9 Partials 4 4
Continue to review full report at Codecov.
|
| const memoElement = ((element: any): MemoElement) | ||
| const type = memoElement.type.type | ||
| const fauxElement = (createElement((type: any), memoElement.props): any) | ||
| const child = render(type, memoElement.props, queue, visitor, fauxElement) |
There was a problem hiding this comment.
This is obviously a very small change, but to leave a comprehensive explanation in this PR:
The fauxElement was creating a the React.Element correctly but was assuming it can only be an element of a function or class component, hence it immediately jumps into render. The alternative is to just return the React.Element, not assume anything about it, and let the visitElement visitor run over it again to check what kind of element it really is
This is the same fix as #15, but for the opposite way around.
This is the same fix as #15, but for the opposite way around.
Fix motiondivision/motion#256
This bug was discovered by running
react-ssr-prepassover themotioncodebase; See: https://github.com/framer/motion/blob/b0dcfa8/src/motion/utils/use-motion-values.ts#L175The bug can be reproduced with any component nested in a
forwardRefcomponent then nested in amemohigher-order component:The visitor for
memocomponents erroneously assumes that the nestedtypecan only be a class or function component. It entirely ignores other types of "special" components like aforwardRefcomponent.The fix is to remove this special path and instead return an element from the
memocomponent's nestedtype. This will correctly return aforwardRefelement.component visitor.