Si te gustó el artículo puedes comprar un café para apoyar Cómprame café

Mantener los componentes puros

Algunas funciones de JavaScript deberían ser puras. Las funciones puras sólo realizan un cálculo y nada más. Al escribir sus componentes como funciones puras, puede evitar todos los errores confusos y el comportamiento impredecible a medida que crece su base de código. Puede hacer que sus componentes sean fáciles de administrar.

Pureza

Entonces, ¿cómo podemos crear una función pura? ¿Y qué características debe tener una función para que sea pura? Una función pura debe ser una función con las siguientes características:

• Se ocupa de sus propios asuntos. No cambia ningún objeto o variable que existiera antes de ser llamado.

• Misma entrada, misma salida. Dadas las mismas entradas, una función pura siempre debería devolver el mismo resultado. No debería dar resultados diferentes a las mismas entradas.

Consideremos una fórmula matemática : y = 2x

Si x = 2, y = 4. Esta invariante es siempre el mismo resultado.

Si x = 3, y = 6. Esta invariante es siempre el mismo resultado.

Si x = 3, a veces y no será 9, –1 o 2,5, dependiendo de alguna otra situación.

Si y = 2x y x = 3 entonces y siempre será 6.

Si convertimos esto en una función de JavaScript:

function getDouble(number) {
  return 2 * number;
}

getDouble es una función pura. Si pasa 3, devolverá 6. Siempre.

React se basa en este concepto. Se supone que cada componente se comporta como una función pura, lo que significa que sus componentes React siempre deben devolver la misma salida JSX dadas las mismas entradas.

Expliquemos un compuesto puro dando ejemplos.

function Member({ user }) {
  return (
    
    
      
 register {user} 
    
  );
}

export default function App() {
  return (
    

      
      
    
  );
}

Siempre devuelve cualquier parámetro de usuario proporcionado.como una fórmula matemática

Conclusión

Un componente debe ser puro, es decir:

Se ocupa de sus propios asuntos. No debería cambiar ningún objeto o variable que existiera antes de renderizar.

Mismas entradas, misma salida. Dadas las mismas entradas, un componente siempre debería devolver el mismo JSX.