JS Function Currying - Usage in React JS

Function currying is a technique in functional programming where a function that takes multiple arguments is transformed into a series of nested functions that each take a single argument.

The result of each function call is a new function that expects the next argument in the sequence. This process continues until all the arguments have been provided, at which point the final function is evaluated and returns the result.

Here's an example of function currying in JavaScript:

function add(x) {
  return function(y) {
    return x + y;
  }
}

// Curried function
const addFive = add(5);

// Invoke curried function
const result = addFive(3); // Output: 8

In this example, add is a curried function that takes an argument x and returns a new function that takes an argument y. The new function adds x and y together and returns the result.

By calling add(5), we create a new curried function addFive that adds 5 to any number that is passed as an argument. We can then call addFive(3) to add 5 and 3 together, resulting in 8.

Practical Examples in React JS

JavaScript function currying can be used in React.js in a variety of ways, including:

Handling event handlers with parameters

In React, event handlers are typically functions that are called when a user interacts with a component. Function currying can be used to pass additional parameters to the event handler function, which can be useful for handling complex interactions.

<button onClick={() => handleButtonClick(param1, param2)}>Click me</button>

Here, handleButtonClick is a curried function that takes param1 and param2 as arguments.

Reusing functions with different parameters

Function currying can be used to create reusable functions that take different parameters based on the context in which they are used.

const stringAppender = (appender) => {
  return (value) => {
    return appender + " " + value
  }
}

const haiAppender = stringAppender("Hai")

console.log("haiAppender =", haiAppender("World"))

const helloAppender = stringAppender("Hello")
// OUTPUT: haiAppender = Hai World

console.log("helloAppender =", helloAppender("World"))
// OUTPUT: helloAppender = Hello World

Here, createAdder is a curried function that returns another function which adds a value to the provided number. This can be useful for creating reusable logic in React components.

Handling complex component state

Function currying can be used to create functions that update complex component state in a controlled manner.

const MyComponent = () => {
  const [state, setState] = useState({ count: 0, name: '' });

  const updateCount = (count) => () => {
    setState((prevState) => ({ ...prevState, count }));
  };

  const updateName = (name) => () => {
    setState((prevState) => ({ ...prevState, name }));
  };

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={updateCount(state.count + 1)}>Increment</button>
      <input type="text" value={state.name} onChange={(e) => updateName(e.target.value)} />
    </div>
  );
};

Here, updateCount and updateName are curried functions that update specific parts of the component state. This can be useful for handling complex state updates in React components.