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
Questions regarding "props.children" #12913
Comments
Opaque data structure refers to the fact that React.Children contains a few methods that allow you to work with the different kinds of
Other than the fact that it has a shorthand in JSX, <Component children={...}/> When React needs to update the DOM, it would be much more expensive to tell whether two single-item arrays are the same than whether two primitive values (e.g. strings) are the same. That being said, I do think the React.Children documentation might be expanded a bit, but that's an issue to log to reactjs/reactjs.org repository. This article may clarify things a bit, it did for me! |
Many thanks @danburzo for your answers and clarifications. I've just found an older issue that addressed exactly the same topic - wonder what happend to those changes?!? (I have opened an issue at reactjs.org => reactjs/react.dev#914): Nevertheless I would still like to ask the second question again: const
child1 = ...,
child2 = ...,
child1IsArray = Array.isArray(child1),
child2IsArray = Array.isArray(child2),
checkResult = child1IsArray && child2IsArray
&& child1.length === 1 && child2.length === 1
&& child1[0] === child2[0]; Sorry if asking again seems a bit annoying - but I would really love to know the exact reason for that design decision.... |
I'm glad I could help you with the first part of your question! Unfortunately, as to why single children are not represented as a single-item array, I don't have an exact answer. However, I was trying to point out that you can still validly pass a single child as a normal prop (rather than the JSX shorthand), a fact that I accidentally obscured with my hypothesis that it's related to performance. |
@danburzo Thanks again for your answer. Mmh, frankly I hoped that maybe someone from the React team would remember the actual reason for that design decision... const
h = React.createElement,
Test1 = () => h('div', null, h('br'), h('br')),
Test2 = () => h('div', { children: [h('br'), h('br')] });
ReactDOM.render(
h('div', null, h(Test1), h(Test2)),
document.getElementById('container')
); By the way: If Test2 would be allowed, this would have some subtle performance benefits if you are implementing some Another example: Ask a React newbie what "children: PropTypes...." would look like if the requirement is that all children should satisfy a certain condition. I think that would not be easy to answer (at least for a newbie). To the React team: If the reasons for the design decision in question are not really known or maybe were just a matter of taste, then of course, feel free to close this issue. |
I assume the decision to not use an array for a single child was made to avoid unnecessary array allocations.
We generally don't recommend using an explicit |
@aweary Thanks for your answer |
Do you want to request a feature or report a bug?
Just questions
Some questions regarding props.children
In the official React documentation of React.Children you can read that
this.props.children
is an "opaque data structure".What does that mean EXACTLY?
I think there are in general three possibilities for the transparency of the data structure of
props.children
:Case 1: EVERY aspect of the
props.children
data structure is open and well defined.If this was right then the term "opaque data structure" would be completely wrong.
Therefore "Case 1" obviously is not the case.
Case 2: NO aspect of the
props.children
data structure is open or clear.That would mean that whenever you use
props.children
you ALWAYS HAVE to use it in combination withReact.Children
asReact.Children
is the only one (mmmh, is it really the only one?) who knows about the actual data structure ofprops.children
.But that would imply that it should neither be allowed to use
nor
As both examples are very common, it seems that "Case 2" is obviously also not the case.
Case 3: SOME aspects of the
props.children
data structure are open and well defined.That would open the possibility that one or even both of the examples in "Case 2" are valid.
But then it would mean that there should be an exact specification what aspects of
props.children
is well and openly defined and which aspects are really opaque.Maybe I've missed something in the React documentation, but I think it's not really exactly specified there, is it?
And last but not least a further question:
Why exactly isn't
props.children
in case there are some children (one ore more) just always an array (as it is done in "Preact" for example)? That would make things so much easier, wouldn't it?Many thanks in advance for the clarifications.
The text was updated successfully, but these errors were encountered: