React: Separate stateful aspects from rendering

Container.jsx

// Container Pattern: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
import Loading from './Loading'
import RenderUser from './RenderUser'

class User extends Component {
  state = { loading: true }

  render() {
    const { loading, user } = this.state
    return loading ? <Loading /> : <RenderUser user={user} />
  }

  componentDidMount() {
    fetchUser(this.props.id)
      .then(user => { this.setState({ loading: false, user })})
  }
}