useCallback 의존관계 배열에 setState를 포함시켜야 합니까?

useCallback 의존관계 배열에 setState를 포함시켜야 합니까?

    const [active, setActive] = useState(false);

    const onActiveChanged = useCallback(
      isActive => () => {
        // do something
        setActive(isActive);
      },
      [setActive], // or just [] is okay?
    );

사용시useState그리고.useCallback(또는useMemo)를 함께 포함하면,setState어떻게 해야 할까요?

이에 대한 권장 사항은 React Docs - Hooks API Reference에도 나와 있습니다.

setState 함수는 상태를 갱신하기 위해 사용됩니다.새로운 상태 값을 받아들여 컴포넌트의 재렌더를 큐잉합니다.

setState(newState);

이후 재렌더 중에 useState에서 반환된 첫 번째 값은 항상 업데이트 적용 후 최신 상태가 됩니다.

메모

react는 setState 함수 ID가 안정적이며 재렌더 시 변경되지 않음을 보증합니다.따라서 useEffect 또는 useCallback 의존관계 목록에서 생략하는 것이 안전합니다.

의 목적useCallback당신이 정확히 암시한 대로 메모를 해야 합니다.

useCallback(fn, deps)은 useMemo(() => fn, deps와 동일합니다.

그리고 뭐에 대해서useMemo의 목적은 다음과 같습니다.

useMemo는 시멘틱 보증이 아닌 퍼포먼스 최적화로 사용할 수 있습니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

하지만 원칙적으로,useState는 렌더링 간에 안정적이기 때문에(즉, 사전 검증 완료), 다시 메모할 필요가 없습니다.

그 다음에, 「무엇인가를 한다」는 것은, 고액의 계산 이하가 되는 것입니까.을 이용하는 것이 그렇게 부담스럽지는 않을 것이다.useCallback단, 필요 없는 보일러 플레이트 코드일 수 있으며, 거의 직접 사용할 수 있습니다.setActive기능.

const [active, setActive] = useState(false);

const onActiveChanged = useCallback(
  isActive => () => {
    // do something
    setActive(isActive);
  },
  [setActive], // or just [] is okay?
);

useCallback 및 기타 후크에서 불필요한 의존관계를 방지하는 다른 방법은 기능 업데이트를 사용하는 것입니다.그 결과, 다음과 같은 것이 가능하게 됩니다.

const [active, setActive] = useState(false);
const [expensiveCalc, setExpensiveCalc] = useState(false);

const onExpensiveCalc = useCallback(
  expensiveInput => () => {
    const newState = doExpensiveCalc(expensiveInput);
    expensiveCalc(newState);
  },
  [setActive], // here for completeness
);

return (<>
  // expensive calculation
  <button onClick={onExpensiveCalc}>Do lengthy calculation</button>
  // cheap calculation, using functional updates
  <button onClick={() => setActive(prevBoolean => !prevBoolean)}>Cheap Set Active</button>
</>)

---

onClick에서 set 상태가 작동하는 방식에는 약간의 차이가 있으며 화살표 기능을 사용해야 합니다.setActive렌더링이 아닌 클릭으로 실행됩니다.이것은 위의 두 번째 답변에 나타나 있지만 설명은 없습니다.

다음 항목도 참조하십시오.React의 useState()는 무엇입니까?

언급URL : https://stackoverflow.com/questions/55738134/should-i-include-setstate-in-usecallbacks-array-of-dependencies