Soy nuevo enReacciona y quiero tener una idea clara de cuál usar, cuando se trata de componentes puedo ver que hay dos tipos.

Componente funcional:

import React from 'react'

const userInput = (props) => {
    return(
        <div>
            <input type='text' onChange={,props.nameChanged} value={props.username}></input>
        </div>
    )
};

export default userInput;

omponente basado en @Class:

import React, { Component } from 'react';
import './App.css';
import UserOutput from './UserOutput/UserOutput';
import UserInput from './UserInput/UserInput';

class App extends Component {

  render() {
    return (
      <div className="App">
        <h3>Assignment Output :</h3>
        <ul>
          <li>
            <UserOutput 
            username={this.state.Usernames[0].username}>
            Welcome to React!
            </UserOutput>
            <UserInput 
            nameChanged={this.nameChangedHandler}>
            </UserInput>
          </li>
                      </ul>
      </div>
    );
  }
}

export default App;

Puedo leer que siempre debemos tratar de usar un Componente funcional porque ayuda en algunas cosas y también escuché que debemos evitar usar un Componente basado en clase cuanto más se pueda

Estoy confundido sobre cuál es el correcto y cuál no.

¿Por qué debería intentar utilizar el componente funcional siempre que sea posible? ¿Cuáles son los beneficios?

¿Cuándo deberíamos elegir un componente funcional y cuando no, no está claro?