関数コンポーネントにおいて、setStateを行うハンドラを記述する方法。

Question

###関数コンポーネントにおいて、setStateを行うハンドラを記述する方法。
タイトル通りです。
私は以下のように、setStateを行うハンドラを記述するため以下のようなコードを書きました。

export default function Hoge() {
    const [currPhoto, setCurrPhoto] =useState(0);
    //....略　
　　const clickHandler = (value)=> {//setState（hook）を行うハンドラ
        setCurrPhoto(value);
    };

    return(
　　　　　　//略
　　　　　　<button onClick={clickHandler(NEXT)}>Next</button>
    )
}

しかしこれを実行すると以下のようなエラー文がでてしまいました。

Too many re-renders. React limits the number of renders to prevent an infinite loop.

このエラーはなんなのか？
調べるとどうやら関数コンポーネント直下にstate setterを置くと無限にループしてしまうことが原因だということがわかりました。

参考サイト↓

https://stackoverflow.com/questions/55265604/uncaught-invariant-violation-too-many-re-renders-react-limits-the-number-of-re

では関数コンポーネントにおいて、setStateを行うハンドラはどのように記述すればよいのでしょうか？

さきほどのサイトでは三項演算子を利用して解決しているようだったのですが、その解決策でいいのでしょうか？
その解決策でいい場合どうすれば私のコードに応用できるでしょう？ケースが違うので上手く当てはめることができませんでした。

またそもそもToo many re-renders.の起きる原因の推測が間違っているかもしれないので、間違っている場合は教えていただけたら幸いです。

質問の要点がバラバラになってしまいましたが、どうかよろしくお願いします。

Answer 1

すいません。私は思い違いをしていたようです。問題点はまったく別にあったようなのでこの質問は締め切らせていただきます。