Event handlers con parámetros personalizados

Cuando creamos componentes cada vez más complejos es posible que necesitemos pasar parámetros personalizados a una función que usemos para manejar eventos. En estos casos hay varias formas de manejar esto.

Usando el patrón factory

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { name: 'platzi' };
	}
	handleClick(name) {
		return event => {
			this.setState({
				name: name.split('').reverse().join('')
			});
		};
	}
	render() {
		return (
			<button onClick={this.handleClick(this.state.name)}>
				Click me {this.state.name}!
			<button>
		);
	}
}

Esta es una forma muy común de hacerlo donde estamos usando el patrón factory para tener una función (this.handleClick) la cual crea una nueva función cada vez que se ejecute y le permite a esta función acceder a los parámetros que reciba nuestro factory.

Usando arrow functions

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { name: 'platzi' };
	}
	handleClick(name, event) {
		this.setState({
			name: name.split('').reverse().join('')
		});
	}
	render() {
		return (
			<button onClick={event => this.handleClick(this.state.name, event)}>
				Click me {this.state.name}!
			<button>
		);
	}
}

De forma similar se pueden usar arrow functions, en este caso en el render creamos una función que recibe event y ejecuta this.handleClick pasándo this.state.name y el event que recibimos. Lo que hace el arrow function es básicamente ser un factory function igual que en el primer método.

El problema de estos dos métodos es que cada vez que hacemos un render del componente (cuando se actualizan los props o el state) estamos creando de nuevo estas funciones. En el ejemplo pasa exactamente esto, lo que podemos notar al ver que el valor de this.state.name se invierte cada vez que hacemos click en el botón.

En general esto puede causar un problema de que estemos creando muchas funciones innecesariamente. Para solucionar esto podemos crear una especie de cache de nuestras funciones.

Cache de funciones

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { name: 'platzi' };
		this.cache = {};
	}
	handleClick(name) {
		return event => {
			this.setState({
				name: name.split('').reverse().join('')
			});
		};
	}
	render() {
		let handleClick = this.cache[this.state.name];

		if (!handleClick) {
			handleClick = this.handleClick(this.state.name);
			this.cache[this.state.name] = handleClick;
		}

		return (
			<button onClick={handleClick}>
				Click me {this.state.name}!
			<button>
		);
	}
}

De esta forma si ya creamos una vez la función con el parámetro deseado podemos usar esa función y si el valor de this.state.name cambió creamos una nueva función y la guardamos en cache.

El único problema de esto sería que podemos llegar a tener muchas funciones en nuestra cache, en ese caso necesitaríamos de alguna forma empezar a limpiarla para eliminar funciones que ya no se usan y evitar problemas de memoria.

Una mejor forma de hacer esto es usar una técnica de programación funcional llamada aplicación parcial (partial application o papp) para crear estas funciones solo una vez y cuando se necesiten.

Aplicación parcial

function handleClick(name, event) {
	return this.setState({
		name: name.split('').reverse().join(''),
	});
}


class App extends Component {
	constructor(props) {
		super(props);
		this.state = { name: 'Platzi' };
		this.handleClick = handleClick.bind(this, this.state.name);
	}

	componentWillUpdate(nextProps, nextState) {
		if (nextState.name !== this.state.name) {
			this.handleClick = handleClick.bind(this, nextState.name);
		}
	}

	render() {
    return (
      <button onClick={this.handleClick}>
        Click me {this.state.name}!
      </button>
    );
  }
}

La aplicación parcial de una función consiste en que en vez de ejecutar completamente una función lo que hacemos es pasarle parte de los parámetros que esta recibe (aplicarla parcialmente) y obtener una nueva función a la cual podemos pasarle el resto de parámetros.

Usando esta idea podemos crear una función (por fuera de nuestro componente) la cual recibe el name (nuestro parámetros personalizado) y el event (que recibe la función al ser un event handler).

Luego en nuestro constructor podemos hacer bind de dicha función y resulta que al hacer este bind no solo podemos pasar el valor de this (el cual nos va a servir para poder actualizar el estado) si no que además podemos pasar N cantidad de parámetros extras y estos van a ser aplicados a la función a la que estamos haciendo bind.

Un ejemplo rápido y simple

const sumar = (n1, n2) => n1 + n2;
const sumar5 = sumar.bind(null, 5);
console.log(sumar5(10)); // 10

Gracias a poder pasar otros parámetros a bind podemos pasar el valor inicial de this.state.name. Luego cuando el componente se vaya a actualizar (componentWillUpdate) verificamos si el name del nuevo estado es diferente del actual y en caso de serlo volvemos a hacer el bind y actualizamos la función this.handleClick para que ahora name sea el nuevo valor. De esta forma reducimos la cantidad de veces que hacemos bind a solo cuando sea necesario.

También podríamos usar los props en vez del state de la misma forma, para que si cambian estos volvamos a hacer el bind, o incluso combinarlos para usar tanto props como state en el bind.

Hay que destacar que la razón para tener handleClick por fuera del componente y usar este cada vez que hacemos el bind es que si hiciésemos bind dos veces sobre la misma función el nuevo valor de name pasaría a llegar como event, en cambio al usar siempre la misma función base sin el bind nos evitamos este problema.

Conclusiones

Como vemos hay varias formas, seguramente se les puedan ocurrir otras, la primer forma es la más simple (tanto usar factory como arrow functions), usar una cache es más bien un hack para evitar los problemas de la primer forma, usar papp sin duda la que tiene menos problemas de rendimiento y la que tiene más sentido con la orientación a programación funcional que posee React.js.