¿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.

Comments

[Julian Gil]

Hola Franco, primero que todo te quiero felicitar por el articulo, me ha parecido muy bueno, ya que es concreto, explicas muy bien los conceptos con referencias a código sencillos, describes las ventajas de usar componentes funcionales y que le hace falta para abordar todas las funciones de un componente de clase.

Este artículo me ha ayudado mucho para estudiar, para entrevistas de trabajo y demás. Te felicito, espero volver a leer artículos de tu autoría.

Muchas gracias

[Víctor Izquierdo]

Tienes toda la razón en relación a los tutoriales que muchos aún usan componentes de clases. Unaa vez que entendí que era el React de la vieja escuela, me enfoqué a usar Hooks. Mi guía de estudio es el freecodecamp y todavía usan componentes de clase. Y lo que llevo de ellos me ha enseñado a apreciar los Hooks.

Gracias por este post. Justo necesitaba uno que definieran en pocas palabras las diferencias de cada uno de ellos.