onClickイベントに引数のある関数をセットしていたところ、クリックをしていないのに、描画時に実行されてしまうケースを経験したので、その解決方法の議事録です。

結論

公式に記載がありました。

onClick={someFunc} のように()を使わない
onClick={() => someFunc(arg)} のように関数でラップする

NGコード

親

export const Parent = () => {
	const handleClick(id: UUID) {
		//
	}

	return (
		<Children handleClick={handleClick} />
	)
}

子

interface Props {
	handleClick: Function;
}

export const Children = (props: Props) => {
	// functionを()で実行してしまう
	return (
		<Button onClick={props.handleClick(id)}>Click</Button>
	)
}

OKコード

親

export const Parent = () => {
	const handleClick(id: UUID) {
		//
	}

	return (
		<Children handleClick={handleClick} />
	)
}

子

interface Props {
	handleClick: Function;
}

export const Children = (props: Props) => {
	return (
		<Button onClick={() => props.handleClick(id)}>Click</Button>
	)
}

結論

NGコード

OKコード

文献