React 팁은 hooks 의존 고민에서 벗어나는 방법을 가르쳐 줍니다.

react 프로젝트에서 흔히 볼 수 있는 장면:

const [watchValue, setWatchValue] = useState('');
const [otherValue1, setOtherValue1] = useState('');
const [otherValue2, setOtherValue2] = useState('');

useEffect(() => {
    doSomething(otherValue1, otherValue2);
}, [watchValue, otherValue1, otherValue2]);

우리는 watchValue 변경할 때 실행doSomething을 원한다. 그 안에 다른 값otherValue1, otherValue2을 인용한다.
이때 고민거리가 하나 있다.

otherValue1,otherValue2의존수조에 가입하지 않으면doSomething안에 접근할 가능성이 높으며otherValue1낡은 변수를 인용하여 장사에서 생각하지 못한 오류가 발생할 수 있습니다(설치otherValue2관련hooks되면 경고를 알립니다).

반대로 eslint, otherValue1을 의존수조에 넣으면 이 두 값이 바뀔 때otherValue2도 실행된다. 이것은 우리가 원하는 것이 아니다. (우리는 그들의 값만 인용하고 싶지만 촉발하고 싶지 않다doSomething.

doSomething,otherValue1을otherValue2로 바꾸면 이 문제를 해결할 수 있습니다.

const [watchValue, setWatchValue] = useState('');
const other1 = useRef('');
const other2 = useRef('');

// ref ， 
useEffect(() => {
    doSomething(other1.current, other2.current);
}, [watchValue]);

이렇게 ref, other1의 변수 인용은 변하지 않고 앞의 문제를 해결했지만 새로운 문제를 도입했다. other2, other1의 값other2이 바뀔 때, 구성 요소 렌더링을 촉발하지 않는다 current 값이 바뀌면 구성 요소 렌더링을 촉발하지 않는다 useRef current 값이 바뀌면 인터페이스가 업데이트되지 않는다!
이것이 바로 hooks 안의 골치 아픈 부분이다. useState 변수는 재렌더링을 촉발하고 인터페이스 업데이트를 유지하지만 useEffect에 의존할 때 원하지 않는 함수로 실행된다.useRef 변수는 useEffect로 안심하고 의존할 수 있지만 구성 요소 렌더링을 촉발하지 않고 인터페이스가 업데이트되지 않습니다.
어떻게 해결합니까?useRef과useState의 특성을 결합하여 새로운 hooks 함수를 구성할 수 있습니다: useStateRef.

import { useState, useRef } from "react";

//   useRef  ，   useState  
type StateRefObj<T> = {
  _state: T;
  value: T;
};
export default function useStateRef<T>(
  initialState: T | (() => T)
): StateRefObj<T> {
  //  
  const [init] = useState(() => {
    if (typeof initialState === "function") {
      return (initialState as () => T)();
    }
    return initialState;
  });
  //   state， 
  const [, setState] = useState(init);
  
  //  value ， 
  //  value ， setState， 
  const [ref] = useState<StateRefObj<T>>(() => {
    return {
      _state: init,
      set value(v: T) {
        this._state = v;
        setState(v);
      },
      get value() {
        return this._state;
      },
    };
  });
  
  //  ， 
  return ref;
}

이렇게 하면 우리는 이렇게 사용할 수 있다.

const watch = useStateRef('');
const other1 = useStateRef('');
const other2 = useStateRef('');

//  ：watch.value = "new";

useEffect(() => {
    doSomething(other1.value, other2.value);
   //  ， ， 
   //  react hooks eslint useRef ， ， 
}, [watch.value, other1, other2]);

이렇게watch, other1,other2useRef의 인용 특성이 있어 doSomething의 불필요한 집행을 촉발하지 않습니다.useState의 응답 기능이 추가되었습니다. .value를 변경할 때 구성 요소 렌더링과 인터페이스 업데이트를 촉발합니다.
우리가 변수가 트리거 doSomething 를 바꾸고 싶을 때, watch.value 를 의존수 그룹에 추가합니다.우리는 값만 인용하고 촉발doSomething을 원하지 않을 때 변수 자체를 수조에 넣는다.
이상은 React 팁입니다. hooks 의존 고민에서 벗어나는 방법에 대한 상세한 내용입니다. React hooks 의존에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!