En react hay 4 tipos principales de componentes en React.

Props ⇒ propiedades que le pasamos al componente la cual reciben del componente padre en forma de prop. Hacen a los componentes re utilizables (Recibe datos) State ⇒ El estado del componente del cual no puede ser accedido ni modificado por fuera de la aplicación. Es un equivalente a variables locales. (Administra datos)

Statefull

import React, { useState } from 'react';

const Button = () => {
    const [name, setName] = useState('Hola Mundo'); 
    return (
        <div>
            <h1>{name}</h1>
        </div>
    );
}

Los componentes statefull son comúnmente usados con state obviamente. ¿Por qué? ⇒ el modelo de react indica que solo puede cambiar si otro componente hijo cambia. Es decir, desde adentro puede cambiar y no por afuera. Imagina el modelo MVC en el cual un componente causa que otro cambie (de manera simplificada). Usan state porque los componentes hijos solo pueden acceder desde adentro, por lo que props es inútil.

Modificar el estado ⇒ setState() Cuando hay una modificación de estado, todos los otros componentes se actualizan

Stateless

import React from 'react';

const Button = () => (
        <div>
            <h1>Hola mundo!</h1>
        </div>
);
// o también
import React from 'react';

const Button = ({ text }) => <ButtonRed text={text}/>;

Estos son usados normalmente con props. ¿Por qué? ⇒ porque siempre van a mantener la misma información, y no va a cambiar sin importar lo que pase. Por ejemplo un botón que siempre nos lleve a un link externo. No interactúa con los otros componentes de React.

No todo debe llevar estado, aprendamos a usar componentes sin estado. Además afectan el rendimiento de la aplicación. Los datos son inmutables

Componentes clase

import React from 'react';

class App extends React.Component {
		constructor() {
        super();
        this.sate = {
            count: 0
        };
    }
// también pueden o no llevar estado
    render() {
        return (
            <div>
                <h1>Hello world! </h1>
            </div>
        )
    }
}

Son la manera anterior a los React Hooks en la cual usábamos los componentes de React

HOC (high order components)

Reciben un componente, y los adaptan de otra manera para usarlos con "modificaciones". Es como el patrón decorator. Suelen regresar un componente que modifica la lógica del componente anterior

import React , { Component } from 'react';

		function ComponentWrapper(WrapperComponent) {
	    class Wrapper extends Component {
        render () {
            return <WrapperComponent {...this.props} />;
        }
    }

    return Wrapper;
}