React: how to compare current props.children with new one

As Matt S pointed out, the accepted answer is kind of a fragile workaround and would depend on a non-standard use of key. Aside from the list examples he listed, even using something like key={id} would fall down if your ids remained the same but certain fields were modified in the resources they represent.

This issue contains a good discussion on the topic and ends with a more stable workaround. Essentially, you can simplify the children prop in a way that allows you to run a deep comparison. You can use the React.Children utilities to write the simplification methods:

// Flattens all child elements into a single list
const flatten = (children, flat = []) => {
    flat = [ ...flat, ...React.Children.toArray(children) ]

    if (children.props && children.props.children) {
        return flatten(children.props.children, flat)
    }

    return flat
}

// Strips all circular references and internal fields
const simplify = children => {
    const flat = flatten(children)

    return flat.map(
        ({
            key,
            ref,
            type,
            props: {
                children,
                ...props
            }
        }) => ({
            key, ref, type, props
        })
    )
}

Then you can use shouldComponentUpdate or React.memo to prevent re-renders:

const MyComponent = ({ children }) => (
    <div>{ children }</div>
)

export default React.memo(MyComponent, (prev, next) => (
    JSON.stringify(simplify(prev.children)) ===
    JSON.stringify(simplify(next.children))
))

These utilities + JSON.stringify are just one approach, the one mentioned in the comment is similar and you could also leverage utilities like lodash.isequal for the deep comparison. Unfortunately I don't know of any one or two liners for this comparison but please comment if you know a simpler stable way to do this!

You can make use of child key prop that React suggests that arrays of children should be given to uniquely identify them. Because each child has a key, you can reliably tell whether children has changed across prop changes (this is the entire point of keys!). If the keys don't match between new and old then they have changed.

React.render(<App><Child key='1'/><Child key='2'/></App>, document.body)

and do the check in the App component you want to check before each update if the children changed

shouldComponentUpdate(nextProps){
   var oldKeys = this.props.children.map( child => child.key);
   var newKeys = nextProps.children.map( child => child.key);

   //compare new and old keys to make sure they are the same
}

Note that this doesn't tell you if the content of each child has changed, you have to compare each by some criteria (such as deeply comparing props) if you want to know if nothing in the whole tree below this point has changed

as an even further optimization we know that children will never change as result of a state change so we can actually do our comparing in componentWillReceiveProps() and just set some state property like childrenHaveChanged