React child reconciliation query - reactjs

Question

I am reading React documentation and I have following two queries about child reconciliation.
Following link says that when children are deleted, instead of deleting them, they can be hidden with display set to 'none'. The specific sentence is:
"In most cases, this can be sidestepped by hiding elements instead of destroying them"
Who is supposed to sidestep? Does React do it automatically or does the programmer have to indicate to React framework to set display style to 'none' instead of reusing it?
(Link: https://facebook.github.io/react/docs/multiple-components.html#stateful-children)
Following link says that in case of reordered children, React can be informed to avoid unnecessary node deletes by assigning a key to each child. However, these keys should be assigned to the component and not to HTML container. But example before that shows assigning key to HTML container which is <li> in that case. What am I missing here?
(Link: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children)

Answer 1

This is explicit on the part of the programmer. You should program the component to set a dynamic style to hide the element if you want this behavior, as per the example:
// Render Pass 1
<Card>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</Card>
// Render Pass 2
<Card>
<p style={{display: 'none'}}>Paragraph 1</p>
<p>Paragraph 2</p>
</Card>
You should put the key on the top-level element or component returned from the map function. In this example, it's the li:
{results.map(function(result) {
return <li key={result.id}>{result.text}</li>;
})}
In this example, it's the component that renders the li.
{this.props.results.map(function(result) {
return <ListItemWrapper key={result.id} data={result}/>;
})}