Componentes Simples

Normalmente os elementos criados com o Component, são componentes que mantem estado e fazem a transição de informação entre os componentes filhos. Se for algo só de visualização basta retornar o HTML :)

A minha dúvida é mais em relação a performace, mostrando um exemplo usado no curso de React, tenho essa class:

class FotoHeader extends Component {

render(){
        return (
            <header className="foto-header">
              <figure className="foto-usuario">
                <img src={this.props.foto.urlPerfil} alt="foto do usuario"/>
                <figcaption className="foto-usuario">
                  <Link to={`/timeline/${this.props.foto.loginUsuario}`}>
                    {this.props.foto.loginUsuario}
                  </Link>  
                </figcaption>
              </figure>
              <time className="foto-data">{this.props.foto.horario}</time>
            </header>            
        );
    }
}

eu poderia simplesmente criar um function que retorna o HTML, dizem que a performace de uma function é melhor do que a de um Component, sendo que nao controlaremos o estado. Ficaria algo assim:

export function FotoHeader({ foto }){
  return(
    <header className="foto-header">
              <figure className="foto-usuario">
                <img src={foto.urlPerfil} alt="foto do usuario"/>
                <figcaption className="foto-usuario">
                  <Link to={`/timeline/${foto.loginUsuario}`}>
                    {foto.loginUsuario}
                  </Link>  
                </figcaption>
              </figure>
              <time className="foto-data">{foto.horario}</time>
            </header>      
  )

}

A dúvida maior é, trabalhando com React qual a melhor maneira de usar? React.Component ou function para esses casos?

Ana, sempre que não for manipular estado, prefira criar um componente como retorno de função :)