【Next.js_Jest】onChange() が何をしているのか教えてください。
解決したいこと
Next.jsのJestを現在学習中の者です。
参考書にて下記ソースを拝見したのですが、その中の
onChange(e);
が果たして何の役割をしているのかわからず困っております。
問題のソース
import React, { useState, useCallback, useRef } from "react";
type DelayButtonProps = {
onChange: React.ChangeEventHandler<HTMLInputElement>;
}
export const DelayInput = (props: DelayButtonProps) => {
const { onChange } = props;
const [isTyping, setIsTyping] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>('');
const [viewValue, setViewValue] = useState<string>('');
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
setIsTyping(true);
setInputValue(e.target.value);
if(timerRef.current !== null) {
clearTimeout(timerRef.current);
}
timerRef.current = setTimeout(() => {
timerRef.current = null;
setIsTyping(false);
setViewValue(e.target.value);
onChange(e); // ←
}, 1000);
}, [onChange])
const text = isTyping ? '入力中...' : `入力したテキスト:${viewValue}`;
return (
<div>
<input type="text" data-testid="input-text" value={inputValue} onChange={handleChange} />
<span data-testid="display-text">{text}</span>
</div>
)
}
内容は簡単なもので、inputタグに文字を入力したら、入力した文字が1秒後にspanタグの箇所に出力されるものです。
onChangeの箇所をコメントアウトしてテストを実行しても正常に終了しました。
【個人的な見解】
onChangeイベントが発生した時、handleChangeメソッドが実行されるが、実はonChangeイベントそのものがpropsで渡るようになっている。
1秒後onChange(e)を実行することで、useCallbackの依存関係であるonChangeに変化があることを認識させて再レンダリングを行わせている。
と考えましたが、コメントアウトしてもテストが正常に終了した理由がわからないです。
何卒ご教示の程、宜しくお願い致します。
1
