support Call and Return components in React.Children calls - #11422
Conversation
| const REACT_PORTAL_TYPE = | ||
| (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) || | ||
| 0xeaca; | ||
| const REACT_CALL_TYPE = |
There was a problem hiding this comment.
Minor nit: let's reorder them before the portal (the numbers go in sequential order).
| }); | ||
|
|
||
| const checkReactChildrenFunctionality = (element, callback, context) => { | ||
| const parentInstance = <div>{element}</div>; |
There was a problem hiding this comment.
Let's just copy and paste this part between tests. It's fine for tests to be verbose. That way they're easier to debug.
|
Ready for re-review! |
| @@ -128,6 +134,8 @@ function traverseAllChildrenImpl( | |||
| // The following is inlined from ReactElement. This means we can optimize | |||
| // some checks. React Fiber also inlines this logic for similar purposes. | |||
| (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE) || | |||
There was a problem hiding this comment.
Can we return this into a switch somehow?
| (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.return')) || | ||
| 0xeac9; | ||
| const REACT_PORTAL_TYPE = | ||
| (typeof Symbol === 'function' && Symbol.for && Symbol.for('react.portal')) || |
There was a problem hiding this comment.
Does it make sense to share the typeof Symbol === 'function' && Symbol.for here? in a supportsSymbolFor variable, or something?
There was a problem hiding this comment.
Doesn't matter right now. This code executes once. Although it probably makes sense to copy how we do it in ReactChildFiber.
|
Friendly ping :-) |
|
Will have time tonight to re-factor! |
ba323c9 to
7eb6bba
Compare
|
Sorry for the late response, I tried to move some of the if logic into a switch, and it just didn't seem to cleanly fit into that construct. I left one attempt, but I think it's more legible as it was before @gaearon. |
7eb6bba to
3d22e79
Compare
| (type === 'object' && children.$$typeof === REACT_ELEMENT_TYPE) || | ||
| (type === 'object' && children.$$typeof === REACT_PORTAL_TYPE) | ||
| ) { | ||
| const invokeCallback = () => { |
There was a problem hiding this comment.
This is a very hot path. We don't want to create closures here. It's fine to duplicate code instead if necessary.
|
Instead of duplicating, can we just set a boolean flag? It starts out being |
|
Nice. Thanks. |
* support Call and Return components in React.Children calls * make tests more verbose * fix ordering of React component types * cleanup conditional detection of children type * directly inline callback invocation * reduce callback invocation code re-use
ghost
mentioned this pull request
* support Call and Return components in React.Children calls * make tests more verbose * fix ordering of React component types * cleanup conditional detection of children type * directly inline callback invocation * reduce callback invocation code re-use
* support Call and Return components in React.Children calls * make tests more verbose * fix ordering of React component types * cleanup conditional detection of children type * directly inline callback invocation * reduce callback invocation code re-use
4 participants
Solves #11416
@gaearon, I tried to read up a bit on Call and Return, but I'm (obviously seeing as it's an experimental API) inexperienced with them. Let me know if I'm testing their usage satisfactorily!