[React]TextArea Input 딜레이 처리

React TextArea 기능을 구현하던중. 

한 화면에 많은 Input 을 넣어서 그런지 단순 onChange 이벤트로 input 을 처리하니 조금씩 딜레이가 생기기 시작했다. 

딜레이가 생기는 화면

AI 와 상담한 결과, 여러 Input 의 내용 시에 하나를 수정하면 동시에 여러 useState 를 동시에 리렌더링 하면서 발생하는 문제라고 이야기했다. 

혹시 너무 많은 내용이 한페이지에 있어서 그런가 싶어서.

입력가능한 부분을 컴포넌트로 분리를 해봤다. 하지만 그래도 여전히 Input 입력시에 미세하게 밀리는 현상이 발견되었다. 

다시 AI 와 여러번의 협의 끝에 컴포넌트의 입력값인 useState 를 컴포넌트 밖에 두지 않고, 내부에 두는 것으로 처리했다. 

export interface TextAreaRef {
    setTextValue: (value: string) => void;
}
export const TextArea = forwardRef<TextAreaRef, TextAreaProps>(({value, placeholder, maxLength, rows, onChange}, ref) => {
    const [localValue, setLocalValue] = useState(value); <- 이런식으로 내부에 위치

    ...

    return (
        <ExtraContainer>
            <StyledTextArea
                value={localValue}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder={placeholder}
                maxLength={maxLength}
                rows={rows}
            />
            <TextCounter
                length={localValue.length}
                maxLength={maxLength}
            />
        </ExtraContainer>
    );
});