¿Qué son las funciones puras y cómo las utiliza React?

¿Qué son las funciones puras?

Resumen del artículo

Las funciones puras son un concepto clave en la programación funcional y se basan en calcular y devolver valores a partir de sus argumentos. Las funciones puras siguen tres reglas principales:

1. La función debe recibir al menos un argumento.
2. La función debe devolver un valor u otra función.
3. La función no debe modificar ni alterar ninguno de sus argumentos.

Las funciones puras no tienen efectos secundarios, lo que significa que no afectan el estado de la aplicación y son más fáciles de probar. Al seguir estas reglas, se mejora la estabilidad y mantenibilidad del programa.

Teoría básica de las funciones puras

Las funciones puras son un concepto clave en la programación funcional y tienen la ventaja de no generar efectos secundarios, lo que significa que no afectan el estado de la aplicación. Esto hace que sean más fáciles de probar, mantener y entender, mejorando la estabilidad y la previsibilidad del programa.

Ejemplo en Javascript

Aquí hay un ejemplo simple en JavaScript:

Función impura:

let contador = 0;
function incrementarContador1() {
  contador++;
  return contador;
}
console.log(incrementarContador1()); // 1
console.log(incrementarContador1()); // 2

Función pura:

function incrementarContador2(contador) {
  return contador + 1;
}
console.log(incrementarContador2(0)); // 1
console.log(incrementarContador2(1)); // 2

En el primer ejemplo, la función incrementarContador1 es impura porque modifica una variable fuera de su alcance (contador). En cambio, en el segundo ejemplo, la función incrementarContador2 es pura porque no modifica ninguna variable externa y devuelve un resultado basado en su argumento. Esto hace que la función pura sea más fácil de entender y probar.

Como las utiliza en React

Antes de explorar cómo se utilizan las funciones puras en React, echemos un vistazo a cómo manipular el DOM con funciones impuras en JavaScript.

const nombre = ‘Juan’;
function imprimirSaludoImpuro() {
  const h1 = document.createElement('h1');
  h1.innerText = 'Hola, ' + nombre + '!';
  document.body.appendChild(h1);
}
imprimirSaludoImpuro();

En este ejemplo, la función imprimirSaludoImpuro es impura porque modifica el DOM directamente (un efecto secundario) y depende de la variable global nombre. A diferencia de una función pura, esta función crea acoplamiento con el entorno y puede generar efectos no deseados o difíciles de predecir.

En React, las funciones puras se utilizan para definir componentes sin estado, también conocidos como componentes funcionales. Estos componentes solo se encargan de renderizar la interfaz de usuario y no mantienen un estado interno. Al utilizar funciones puras en React, se pueden crear componentes más predecibles y fáciles de mantener.

Aquí hay un ejemplo de un componente funcional puro en React:

import React from 'react';

const Saludo = (props) => {
  return <h1>Hola, {props.nombre}!</h1>;
};

export default Saludo;

En este ejemplo, Saludo es una función pura que toma props como argumento y devuelve un elemento JSX. No modifica las propiedades ni tiene efectos secundarios, ya que solo se basa en las propiedades proporcionadas para renderizar el resultado.

Al utilizar componentes funcionales puros en React, se pueden aprovechar las ventajas de la programación funcional, como la facilidad de prueba, la previsibilidad y la mantenibilidad del código. Además, React puede optimizar el rendimiento de estos componentes, ya que conoce sus características puras.