How to dynamically load content in React?

Question

JavaScript

On normal js, it would be something like doing node.appendChild(node) on response from the server, after receiving data from the server.
I'm interested in how to do the same in react + redux.
Upon receipt, I make a dispatch, after which I render the content.
Actually interested in how to display only new data without rendering previously received.
Right now it's like this

render(){
  return this.props.data.map(key=>{
       return key
  }
}

Answer 1

Well, you can dodge it with dangerouslySetInnerHTML, but it's not worth it at all.
Just add new data to the state, and React will determine for itself what needs to be added to the DOM and what should not be touched.

Answer 2

If you draw new data through .map and inside the map you draw a component, then:
a) write the component in the functional (stateless) style
b) write the component through class inheritance from React.PureComponent
c) add shouldComponentUpdate
In this case, you will have to draw only newly arrived data to the parent component.
If you have a layout inside the map right away, then make a component and then choose a / b / c above.
Documentation