¿Componentes de clase o funcionales?
Tags: javascript, beginners, react, spanish
Published: 2021-04-25 17:14:02

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](https://es.javascript.info/classes) que extiende la clase [Component](https://es.reactjs.org/docs/react-component.html) de React.

```javascript
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?

```javascript
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.).

```javascript
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?

```javascript
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](https://es.wikipedia.org/wiki/Programaci%C3%B3n_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](https://es.reactjs.org/docs/error-boundaries.html). Este cuenta con un método de ciclo de vida para atrapar errores (componentDidCatch) que no puede reproducirse con hooks.