[React]カリー化がよくわからない

Question

前提・実現したいこと

クリック時に配列のvalueを受け取る様な処理を行なっているのですが、カリー化についてよくわからず行き詰まっています。
カリー化を調べてみたところバグがおきない様にするもので、結果は変わらないという認識を自分の中ではしています。
下の二つは明確にどの様な違いがあるのでしょうか。
詳しくわかる方がいましたらコメントお願いします。

該当のソースコード

//クリックできてvalueを確認できた
const handleClick = (name) => () => {
    console.info('You clicked the Chip.');
    console.log(name)
    //setPerson(e.target.label)
  };

//そもそもクリックできない
const handleClick = (name) => {
    console.info('You clicked the Chip.');
    console.log(name)
    //setPerson(e.target.label)
  };

  const [person, setPerson] = useState("山田太郎");
  const personNames = ['山田太郎', '山田花子', '山田二郎'];

  return (
    <div>
      <div className={classes.root}>
        <Paper className={classes.paper}>
          <FormDialog />
          <Grid container wrap="nowrap" spacing={2} className={classes.chip}>
            <Grid item xs zeroMinWidth>
              <Typography noWrap>{message}</Typography>
              {personNames.map(name =>
                <Chip
                  icon={<PersonIcon />}
                  key={name}
                  label={name}
                  onClick={handleClick(name)}
                  onDelete={handleDelete}
                  className={classes.chip}
                />)}
            </Grid>
          </Grid>
        </Paper>
      </div>

Answer 1

下の二つは明確にどの様な違いがあるのでしょうか。

上では、handleClick(name)の返り値は関数ですが、後者ではundefinedです。両者は全く別物です。

Answer 2

(name) => () => {
    console.info('You clicked the Chip.');
    console.log(name)
    //setPerson(e.target.label)
  };

nameを与えると「引数無しで、{}内を実行する関数」を返す関数

---

(name) => {
    console.info('You clicked the Chip.');
    console.log(name)
    //setPerson(e.target.label)
  };

nameを与えると{}内を実行する関数

---

全然違いますね。

Comments

[aiai8976]

違いについてよくわかりました。
ありがとうございました。