React.Children.map vs React Children.toArray.map

Question

In React children is the opaque data structure used in composition. To manapulate it, React exposes the React.Children API, which among others, contains the methods React.Children.map and React.Children.toArray.

According to the docs, Children.map invokes a function on every child element (usually to render, or cloneElement), while toArray changes from from the opaque children to a simple js array.

React.Children.map(child, fn) and React.Children.toArray.map(child, fn) feel effectively equivalent. I frequently see Children.map used, and was looking for solid evidence to backup the best practice, or an explanation for the use case of toArray.map.

My first instinct is that toArray obviously adds another call, which is potentially less performant (marginally?), but I believe toArray also strips out undefined or null children.

Answer 1

It is a very old question, but i'm adding what i found out!

Children.toArray is a bit different with Children.map when passing null or undefined as children.

<ReactComponent>
  <div>one</div>
  { null }
</ReactComponent>

In the above example,

Children.toArray skips null or undefined and length of result will be 1

however Children.map(children, (val) => {}) also iterates when null, length of result will be 2

Answer 2

According to the react code, Children.toArray is the same as Children.map passing the identity function (x) => x. Therefore Children.map(children, func) will be always more performant than calling Children.toArray(children).map(func).

Answer 3

This difference between React.Children.map and React.Children.toArray.map is quite important if you are using Inline If with Logical && Operator

Let's say you have this React Component

const ReactComponent = () => {
    return (
        React.Children.map((child, index) => (
            <div>{child}</div>
        ))
    )
}

const checkBooleanValue() => {
    return false;
}

You use it with a child and a conditional If:

<ReactComponent>
        <span>Child</span>
        {checkBooleanValue() &&
            <span>Another Child</span>
        }
</ReactComponent>

If checkBooleanValue() is false

• React.Children.map will give you two children
  • The <span> React.Element
  • false for the Inline If
• React.Children.toArray.map will give you just one child:
  • The <span> React.Element

With React.Children.map you'll therefore end up with an empty div for the 2nd child.