Mi viaje en React comenzó hace cuatro años con componentes funcionales y Hooks. Luego vino 'Siswe, un compañero participante en el bootcamp y nuestro entusiasta residente del componente de clase. Mientras el resto de nosotros colaborábamos en proyectos de equipo con componentes funcionales, 'Siswe se aferraba a los componentes de clase con una lealtad inquebrantable.

Los componentes son los componentes básicos de su interfaz de usuario (UI).

Piense en ellos como ladrillos de Lego: puede combinarlos de varias maneras para crear estructuras complejas. Son piezas de código independientes y reutilizables que encapsulan la interfaz de usuario y la lógica.

La reutilización de un componente dentro de otro componente normalmente tiene este aspecto:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    

      
  );
}

Los componentes de clase y los componentes funcionales son las dos formas principales de crear componentes en React.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count   1 });
 };

 render() {
  return  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

export default Counter;

Este es un componente de clase, creado usando clases de JavaScript que extienden la clase React.Component.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count   1);
  };

  return (
    

      
You clicked {count} times
      Click me
    
  );
}

export default Counter;

Este, por otro lado, es un componente funcional, escrito como una simple función de JavaScript.

Gestión estatal: la diferencia fundamental.

Los componentes de clase administran su propio estado interno usando this.state. Por lo general, esto se inicializa en el constructor, se accede mediante el objeto this.state y se actualiza mediante el método this.setState, como se ve en el bloque de código anterior.

Los componentes funcionales inicialmente no tenían estado. Pero con la introducción de Hooks, obtuvieron la capacidad de gestionar la lógica del estado y del ciclo de vida. Utilizando el gancho useState para administrar el estado, devuelve un par de valores: el estado actual y una función para actualizarlo, como se ve arriba. Esto es suficiente para una gestión estatal sencilla. Para una lógica de estado más compleja que implique múltiples subvalores, o cuando el siguiente estado dependa del anterior, querrás usar useReducer.
Por ejemplo:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count   state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

export default Counter;

Aquí, useReducer gestiona múltiples valores de estado y una lógica de actualización compleja de una manera estructurada y fácil de mantener. Los ganchos son exclusivamente para componentes funcionales.

Evite la manipulación directa del objeto de estado en ambos componentes.

Nunca modifique ni mute directamente el objeto de estado, independientemente del tipo de componente. En su lugar, cree un nuevo objeto con los valores actualizados. Este enfoque ayuda a React a realizar un seguimiento eficiente de los cambios y optimizar los renderizados.

Ejemplo de componente funcional:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

export default UserProfile;

Ejemplo de componente de clase:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

export default UserProfile;

En ambos ejemplos, estamos actualizando la propiedad de nombre del objeto de usuario mientras preservamos la integridad del objeto original. Esto garantiza que se cree un nuevo objeto de estado, preservando la inmutabilidad y evitando posibles problemas con las actualizaciones de estado. El cumplimiento de esto garantiza un comportamiento predecible, optimizaciones del rendimiento y una depuración más sencilla.

Los componentes de clase son para lógica compleja.

• Gestión de estados compleja: Cuando se trata de una lógica de estado compleja que requiere un control detallado, los componentes de clase con this.state y this.setState pueden ofrecer más flexibilidad.
• Métodos de ciclo de vida: Para componentes que dependen en gran medida de métodos de ciclo de vida como componenteDidMount, componenteDidUpdate o componenteWillUnmount, los componentes de clase son la opción tradicional.
• Límites de error: Para manejar errores dentro de un árbol de componentes y evitar fallas, los componentes de clase con componenteDidCatch son esenciales.
• Optimización del rendimiento: En escenarios específicos de rendimiento crítico, se puede aprovechar PureComponent o shouldComponentUpdate dentro de los componentes de clase.
• Bases de código heredadas: Si estás trabajando en un proyecto existente que depende en gran medida de componentes de clase, podría ser más fácil mantener la coherencia usándolos para componentes nuevos.

Los componentes funcionales son para vistas simples.

• Componentes simples: Para componentes de presentación con estado o lógica mínimos, los componentes funcionales suelen ser la opción preferida debido a su simplicidad y legibilidad.
• Gestión del estado con ganchos: Aprovechar useState y useReducer en componentes funcionales proporciona una forma poderosa y flexible de administrar el estado.
• Efectos secundarios: El gancho useEffect permite gestionar efectos secundarios como la obtención de datos, suscripciones o manipulaciones manuales de DOM (modelo de objetos de documento).
• Optimización del rendimiento: useMemo y useCallback se pueden utilizar para optimizar el rendimiento en componentes funcionales.

Deje que las necesidades de su componente guíen su decisión.

El enfoque funcional generalmente se considera más conciso y legible, y a menudo es suficiente debido a su simplicidad y eficiencia. Sin embargo, los componentes de clase ofrecen más control sobre la gestión del estado y los métodos del ciclo de vida, especialmente cuando se trata de lógica compleja u optimización del rendimiento. Esto significa una mejor estructura para organizar la lógica compleja.

La elección entre componentes de clase y funcionales no siempre es clara, ya que no existe una regla estricta. Evalúe los requisitos de su componente y elija el tipo que mejor se adapte a los requisitos de su proyecto.

¿Con qué componente te gusta más trabajar?