Curring and React

Curringはカリー化といい、複数の引数を取る関数内においてその引数を分解する機能です。

下記は一般的なJavascriptのコードです。

const sum = (a, b) => a + b;

sum(1, 2); // 3

上記をCurryingで書き直すと、以下のように記述することもできます。

// 以下と同じ
// const sum = function(a) { return function(b) { return a + b }}
const sum = a => b => a + b;

sum(1)(2); // 3

分割した引数を戻り値で使い結果を返すわけです。

Reactのケース

以下のような高階コンポーネントを利用したコードがあるとします。

import React from "react";
import ReactDOM from "react-dom";

// HOC
const Hoc = WrapComponent => (props) => <WrapComponent {...props} />;
// Base Component
const Component = props => <p>Hello, {props.name}</p>;

const MyApp = Hoc(Component);
const App = () => <MyApp name="maeda" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

HOC内で受け取るデータは親から渡ってくるpropsのみですが、props以外の任意の値をHOCに渡したいとします。上の例で言えば、Hoc(Component)("任意の値")といった感じです。

これもCurryingで記述ができます。

import React from "react";
import ReactDOM from "react-dom";

const Hoc = WrapComponent => value => ({ name, ...others }) => {
  const n = name + value;
  return <WrapComponent name={n} {...others} />;
};

const Component = props => <p>Hello, {props.name}</p>;

const MyApp = Hoc(Component)("さん");

const App = () => <MyApp name="maeda" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当たり前の動作に見えて、根本にはCurringが使われています。