Currying can save passing extra props!

Saksham Malhotra — Tue, 09 Jan 2024 20:58:19 +0000

Before we proceed with using currying in a sample React example to omit passing extra props, do check out what currying is.

Let's consider a simple example where we are developing the players section in a game and the player names are editable

const Players = () => {
    const [playerNames, setPlayerNames] = useState(["Player 1", "Player 2"]);

    function updatePlayerName(index, name) {
        setPlayerNames((prevPlayers) => {
            prevPlayers[index] = name;
            return [ ...prevPlayers ];
        });
    }

    return (
        <>
            {playerNames.map((playerName, index) => {
                <Player
                    key={index}
                    name={playerName}
                    index={index}
                    updatePlayer={updatePlayerName}
                ></Player>;
            })}
        </>
    );
}

Note that we are passing a prop called index just to enable updating name at a particular index in the state. But apart from that, there should be no use of index in the child Player component.

How can we avoid passing this extra index prop?

You guessed it right, by using the concept of currying. We can simply curry the setPlayerName method as

function updatePlayerName(index) {
    return function (name: string) {
        setPlayerNames((prevPlayers) => {
            const updatedPlayers = [...prevPlayers];
            updatedPlayers[index] = name;
            return updatedPlayers;
        });
    };
}

and call it in the template as

updatePlayer={updatePlayerName(index)}

Note that now the updatePlayerName function is invoked inline in the template instead of being just assigned as a reference. This helps return a new curried reference to the function to pass down thus eliminating the need of passing index as an additional prop.

Best of coding!

Let's make a curry!

Saksham Malhotra — Tue, 09 Jan 2024 19:32:41 +0000

Currying is a technique in JavaScript that allows you to transform functions with multiple arguments into a sequence of functions, each taking one argument at a time. That is from f(a, b, c) to f(a)(b)(c).

This might sound overwhelming at first but should be very easy to understand with an example.

Suppose we want to multiply 2 numbers together. Assuming it is not straight forward, we can declare a function called multiply as

function multiply(num1, num2) {
    // pseudo complex logic
    return num1 * num2;
}

But what if we want to generate variants which can either double or triple or quadruple a number?

One option could be to simply define each variant separately as

function double(num1) {
    return multiply(2, num1);
}

Or we can be clever and use currying here

const generateMultiplier = function(multiplier) {
    return function multiply(num) {
        return multiplier * num;
    }
}

This would give us the power to generate variants as we like

const double = generateMultiplier(2);

const result = double(2); // returns 4

Best of coding!

Forem: Saksham Malhotra

Currying can save passing extra props!

Let's make a curry!