React Hooks에서 상태 종속성을 리팩토링 할 때 피해야 할 몇 가지 일반적인 실수는 무엇입니까?

고리를 조건부 또는 내부 루프로 호출합니다

React Hooks의 기본 규칙 중 하나는 후크를 무조건적으로 그리고 항상 모든 렌더링 중에 같은 순서로 불러야한다는 것입니다. 조건부 명세서 또는 루프 내에서 후크를 호출 하여이 규칙을 위반하면 예측할 수없는 행동과 버그가 발생할 수 있습니다.

예를 들어, 조건부 블록 내부에서 'usestate'를 호출하면 반응이 렌즈 사이의 후크 상태를 잃어 버릴 수 있습니다. 일관된 후크 호출을 보장하기 위해 기능 구성 요소 또는 사용자 정의 후크의 최상위 레벨에서 항상 후크를 호출하십시오.

***

과잉 상태

구성 요소의 모든 데이터 또는 변수가 상태에 저장 될 필요는 없습니다. 렌더링에 영향을 미치지 않는 변수에 대해 'usestate'를 불필요하게 사용하면 추가 재 렌즈와 성능 오버 헤드가 소개됩니다.

예를 들어, 변수를 내부적으로 사용하고 UI 업데이트를 트리거 할 필요가없는 경우 평범한 변수로 유지하거나 렌즈 렌더를 유발하지 않고 렌즈 사이에 값을 보존 해야하는 경우 'useref'를 사용하는 것이 좋습니다. 이를 통해 렌더링 동작을 최적화하고 불필요한 업데이트를 피합니다.

***

상태의 직접 돌연변이

반응 상태는 불변입니다. 일반적인 실수는 새로운 인스턴스를 만드는 대신 상태 객체 또는 배열을 직접 돌연변이하는 것입니다.

예를 들어, 새 배열 참조를 작성하지 않고 항목을 직접 상태 배열로 밀면 반응이 업데이트를 인식하는 것을 방지합니다. 즉, 구성 요소가 제대로 다시 렌더링되지 않음을 의미합니다. 대신, 새 개체 또는 배열을 만들어 항상 상태를 불변으로 업데이트하십시오 (예 : 스프레드 구문 사용).

***

업데이트의 상태 문제가 있습니다

상태 업데이트는 비동기식이 될 수 있고 배치 될 수 있으므로 연속 상태 업데이트 내부에서 직접 현재 상태 값을 참조하면 상태가 오래된 상태 문제로 이어질 수 있습니다.

예를 들어,`setCount (count + 1)````` ''를 여러 번 연속으로 호출하면 구식 값 'count'값을 사용할 수있어 예상치 못한 동작이 발생할 수 있습니다. 이를 피하려면 Setter의 기능적 업데이트 양식 (`setCount (prevCount => prevCount + 1)`)를 사용하여 각 업데이트는 최신 상태 값에서 작동합니다.

***

###`useeffect '에서 누락되거나 잘못된 종속성 배열

'useeffect', 'usecallback'또는 'usememo'의 종속성 배열은 효과 또는 메모 화 된 값이 업데이트 될 때 정의하는 데 중요합니다. 종속성을 생략하거나이를 잘못 지정하면 효과가 너무 자주 실행되거나 종종 충분하지 않거나 오래된 폐쇄로 이어질 수 있습니다.

일반적인 실수는 다음과 같습니다.
- 효과 콜백 내부에서 사용되는 종속성을 생략하여 반응을 유발하고 잠재적으로 버그로 이어집니다.
- 무한 효과 루프를 유발하는 과도하게 지정되는 종속성.
- 종속성 배열에서 렌더링 사이에 변경되는 함수 또는 객체를 잊어 버립니다.

`eslint-plugin-react-hooks '와 같은 라인 툴은 올바른 종속성 배열을 시행하는 데 도움이되지만 개발자는 부실하거나 일관되지 않은 값을 피하기 위해 무엇을 포함 해야하는지 이해해야합니다.

***

복잡한 상태 논리에 대한`usestate`에 대한 과도한 관계

여러 필드 또는 복잡한 업데이트가 포함 된 복잡한 상태의 경우 여러 'usestate'호출에만 의존하면 복잡하고 오류가 발생하기 쉬운 코드가 발생할 수 있습니다.

대신, 상태 업데이트를 중앙 집중화하고 상태 전환이 어떻게 발생하는지 명확하게하는 'usereducer'를 사용하는 것을 고려하십시오. 또한 '파견'함수는 렌즈간에 변경되지 않고 종속성에서 안전하게 사용할 수 있기 때문에 오래된 상태 문제를 피하는 데 도움이됩니다.

***

부작용을 청소하는 것을 무시합니다

'useeffect'와 같은 후크를 사용하여 부작용 (예 : 구독, 타이머, 이벤트 리스너)을 관리 할 때 개발자는 때때로 이러한 효과를 올바르게 정리하는 것을 잊어 버립니다.

정리가 없으면 효과가 무기한 축적되거나 실행될 수있어 메모리 누출 또는 원치 않는 동작이 발생할 수 있습니다. 컴포넌트를 마치기 전에 또는 효과가 다시 실행되기 전에 구독 또는 취소 타이머를 처리하기 위해 항상 효과에서 정리 기능을 반환하십시오.

***

컨텍스트 및 상태 공유의 일관성이 없거나 과도한 사용

상태 종속성을 리팩토링 할 때 너무 많은 공유 상태를 반응 컨텍스트 또는 글로벌 상태에 넣으면 해당 컨텍스트를 소비하는 구성 요소의 불필요한 재 렌즈로 인해 성능 문제가 발생할 수 있습니다.

모범 사례는 컨텍스트가 단일 책임에 중점을두고 관련이없는 상태로 과부하를 피하는 것입니다. 재 렌즈의 범위를 줄이기 위해 가능한 경우 상태 종속성을 해체합니다.

***

중첩 상태에 대한 비효율적이거나 잘못된 업데이트

중첩 된 개체 또는 상태에서 업데이트하는 것은 까다로울 수 있습니다. 일반적인 실수는 전체 객체 또는 배열 참조를 교체하는 대신 중첩 된 객체 내의 속성 만 직접 업데이트하려고 시도하는 것입니다 (예 : 중첩 특성).

React는 얕은 비교를 사용하여 상태 변경을 감지하기 때문에 중첩 데이터에 대한 새로운 참조를 작성하지 않으면 업데이트가 재 렌즈를 유발하는 것을 방지합니다. 상태를 업데이트 할 때는 항상 중첩 구조물을 불변으로 교체해야합니다.

***

콜백에서 최신 상태를 사용하는 것을 잊어 버렸습니다

내부에 생성 된 콜백 (예 : 이벤트 핸들러 또는 타이머)은 폐쇄로 인해 이전 상태 값을 캡처 할 수 있습니다. 이로 인해 콜백이 오래된 상태에서 작동하여 불일치가 발생합니다.

기능적 상태의 상태 업데이트, 'useref'와 같은 기술을 사용하여 최신 상태를 유지하거나 올바른 종속성을 사용하여 'USECALLBACK'과 같은 메모 화 후크를 사용하여 오래된 폐쇄를 피하십시오.

***

구현 세부 사항 테스트 사용자 동작 대신

이것은 상태 리팩토링에 직접적인 것이 아니지만 후크가 테스트에 미치는 영향과 관련이 있습니다. 내부 상태 구현 세부 정보에 의존하는 테스트는 클래스 구성 요소에서 후크로 리팩토링 할 때 중단 될 수 있습니다.

테스트는 구성 요소 내부 또는 후크 특정 세부 사항보다는 사용자를 대상으로하는 동작 및 출력에 중점을 두어 내부 리팩토링에 관계없이 견고성을 보장해야합니다.

***

Eslint 후크 규칙 및 모범 사례를 무시합니다

React의 공식 후크 규칙을 따르고`eslint-plugin-react-hooks '와 같은 적절한 eslint 플러그인을 사용하여 많은 일반적인 실수를 방지 할 수 있습니다.

이러한 도구를 사용하지 않으면 종종 누락, 잘못된 후크 사용 또는 깨진 로직으로 이어집니다. 일관된 린팅은 실수를 조기에 포착하고 개발자를 모범 사례로 안내하는 데 도움이됩니다.

***

피하기위한 주요 실수 요약

- 일관되게 최상위 대신 고리를 조건부 또는 내부 루프를 호출합니다.
- 재 렌더링이 필요하지 않은 변수에 상태를 사용합니다. 'useref'또는 로컬 변수를 선호합니다.
- 불변의 업데이트 대신 직접 돌연변이 상태.
- 부실한 상태 문제로 이어지는 연속적인 업데이트에서 직접 상태를 참조합니다.
- 부정확하거나 불완전한 종속성 배열이 효과 버그 또는 무한 루프를 유발합니다.
-`useeducer '대신 복잡한 상태 논리에 대해'usestate '를 과도하게 사용합니다.
-`useeffect '에서 부작용을 잊어 버립니다.
- 과도한 재 렌즈로 이어지는 맥락의 남용 또는 오용.
- 중첩 된 상태 구조에 대한 부적절한 업데이트.
- 폐쇄로 인한 오래된 상태를 캡처하는 콜백.
- 행동보다는 구현 세부 사항에 따라 다릅니다.
- Eslint 후크 규칙 및 경고를 무시합니다.

이러한 일반적인 실수에주의를 기울여 상태 의존성을 신중하게 관리함으로써 Refactored React Hooks 코드는보다 신뢰할 수 있고 유지 관리 가능하며 수행자가됩니다. 확립 된 반응 모범 사례에 따라 툴링 지원을 사용하면 후크에서 리팩토링 상태에있을 때 위험을 크게 줄일 수 있습니다.