객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

Question

안녕하세요.
react를 공부 중인 초보자입니다.
현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다.
그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면
... 연산자로 복사하면서 가는게 안좋나요?

예를들어

setState(prev => ({
          ...prev,
          [name]: {
            ...prev[name],
            data: {
                ...prev[name].data,
                 value: value
            }
          },
        }));

이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요?
해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다.

초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, 
input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다.

객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 
클린 코드 (가독성) 면에서도 별로 일까요?

포크코딩 · Answer

setState에 넘겨주는 콜백 함수에서 …연산자를 많이 쓰는 것이 고민으로 보입니다.

콜백 함수 전에 지역변수를 하나 선언하셔서, 이전 상태를 …연산자로 복사한 다음 재활용하세요. 그러면 여러번 … 쓸 필요가 없습니다.