Currying with React
Tags: react, javascript, functional
Published: 2020-11-11 10:02:23

Currying may or may not be an alien concept to many of you & if you know myself at all, you'll know that I enjoy currying. No I won't make a reference to delicious dish that is curry, whilst I'm a foodie, that's totally off topic. If you'd like to _generally_ get a better idea of what currying is, then read [this pretty awesome post](https://dev.to/__namc/what-is-currying--3l2a)!

When using React, in my opinion it makes sense to utilise currying, whether that's a means of passing [hooks](https://reactjs.org/docs/hooks-intro.html) to child components via [props](https://reactjs.org/docs/components-and-props.html). But I find it effective when trying to encapsulate business logic away from the component itself, in the event where you want to trigger something on a given event, let's say click, how would you do this? How would you pass in arguments without just creating a call back wrapper of some sort? 

An example of where this wouldn't work: 

```javascript
import React, { useState } from 'react';

const clickHandler = (state, e) => console.log(e.target);

export default (props) => (
  const [state, setState] = useState({});

  <button onClick = {clickHandler(state)}>{props.text}</button>
);
```

If you tried to do this then it wouldn't behave quite like you'd hope, assuming that you'd want to pass the value of state into the click handler function & the event object. That's fine though, all you'd have to do in order for this to work as you'd expect is this: 

```javascript
import React, { useState } from 'react';

const clickHandler = (state) => (e) => console.log(e.target);

export default (props) => (
  const [state, setState] = useState({});

  <button onClick = {clickHandler(state)}>{props.text}</button>
);
```

That's it, it's that simple! For me I find this is just **such** a simple way to separate your concerns when using React. It may just be that I'm very bias as I really like functional programming in JavaScript, but I also really enjoy React. I also like to favour simplicity over making a really fancy code base that can do x, y & z, I really like to follow the [YAGNI principle](https://martinfowler.com/bliki/Yagni.html). An example being how I've seen people use redux in the most simplistic of React applications, there's no real need & if anything in that kinda scenario in my eyes you're using a bazooka to kill a fly. 

But going back to some fundamental topics like writing reusable code, recently when working on making some _very_ accessible web application, I found currying was a God send. Whether that was altering html attributes such as [aria-invalid](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) or simply disabling certain buttons from being pressed, etc. When I was writing this application, I was _trying_ to comply with WCAG 2.1 AAA standards, an example being [Success Criterion 2.1.3 Keyboard](https://www.w3.org/TR/WCAG21/#no-keyboard-trap). But back to currying more specifically, it was handy just being able to do something like the following, which could be used across all of my components:

```javascript
export const handleSomeEnterButton = (expectedCode) => (fn) => (e) => {
  const charCode = e.which ?? e.keyCode;
  if (charCode === expectedCode) {
    fn(e);
  }
};

export const handleEnterButton = (fn) => handleSomeEnterButton(13)(fn);

export const handleSpaceButton = (fn) => handleSomeEnterButton(32)(fn);
```

I won't blabber on & on unnecessarily, but I'll wrap this up now before I waffle, because I could rant forever! 😂 - But clearly it's not just me that likes the idea of using currying with React, it may be worth reading [this post](https://dev.to/s0meon3/currying-state-handlers-in-react-2ap1) just to get another insight into the subject matter.

Here are a few other posts that may be worth looking at: 
1. [Higher order components and currying in React](https://dev.to/cesareferrari/higher-order-components-and-currying-in-react-fep)
2. [Currying Functions and React Component Usage](https://www.nypl.org/blog/2016/12/06/currying-functions)
3. [Curry away in React](https://hackernoon.com/curry-away-in-react-7c4ed110c65a)