¿Componentes de clase o funcionales?

A partir de React v16 con la implementación de los hooks, los componentes de tipo clase quedaron anticuados. Quienes empiezan a estudiar React ven cursos donde usan componentes funcionales, otros usan clases y en unos pocos aparecen ambos. Pero, ¿cuál usamos cuando trabajamos?

TL;DR: Siempre que se pueda, usá componentes funcionales. Son más legibles y son acordes a las tendencias de programación funcional.

¿Qué es un componente de clase?

Un componente de clase es una clase de javascript que extiende la clase Component de React.

class Biology extends React.Component

Este nos permite guardar su estado y controlar lo que ocurre durante su ciclo de vida, exponiéndonos métodos como componentDidMount o componentWillUnmount.

¿Cómo se ve un componente de clase?

class Biology extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            professor: "Franco Cuarterolo"
            students: props.numberOfStudents
        }
    }

    componentDidMount(){
        this.startAssignment()
    }

    componentWillUnmount(){
        this.finishAssignment()
    }

    render(){
        return(
        <div> Biology, Professor: {this.state.professor} </div>
        )
    }

}

¿Qué es un componente funcional?

Un componente funcional es una función que recibe el objeto Props y retorna un ReactNode (un ReactNode puede ser un elemento html, un string, un booleano, entre otros tipos de datos.).

const Biology = (props) => { return(<ReactNode />) }

Estas funciones solo reciben y retornan, por eso tienen que utilizar React Hooks (useState para el estado, useEffect para los ciclos de vida) para imitar las cualidades de un componente de clase.

¿Cómo se ve un componente funcional?

const Biology = (props) => {
    const [professor, setProfessor] = React.useState("Franco Cuarterolo");
    const [students, setStudents] = React.useState(props.numberOfStudents);

    React.useEffect(()=>{
            startAssignment()
            return () => {
                finishAssignment()
            }
        })

    return <div> Biology, Professor: {professor} </div>
}

¿Por qué usar funciones por encima de clases?

• El frontend está experimentando una fuerte influencia de los lenguajes de programación funcionales, y esto nos lleva a integrar practicas del paradigma funcional en nuestro día a día.
• Ayuda a unificar criterios, donde todos los componentes tienen la misma estructura.
• Nos ahorra entender un concepto que está en camino al desuso en Javascript (Clases), aligerando la curva de aprendizaje
• Hacer testing de un componente funcional suele ser más sencillo.
• Suelen requerir menos lineas de código haciendolo más facil de entender.

¿Alguna vez voy a tener que usar clases?

Sí, existe un caso que todavía no está resuelto con Hooks que son los ErrorBoundaries. Este cuenta con un método de ciclo de vida para atrapar errores (componentDidCatch) que no puede reproducirse con hooks.