useState 초기값을 함수로 사용하는 경우

useState 초기값을 함수로 사용하는 경우

사용하는 경우는 무엇입니까?useState함수로서의 초기값
단순히 값을 전달하는 것과 차이가 있습니까?

예.

const [state, setState] = useState(() => someValue)

초기 상태의 계산을 한 번만 수행할 때 사용합니다.그 대신 다음과 같은 표현을 사용할 수 있습니다.

const [state, setState] = useState(compute())

그compute다른 렌더링에서도 실행되며 첫 번째 렌더링 후에는^* 해당 값만 무시됩니다.

이 경우:

const [state, setState] = useState(() => compute())

지금이다,compute는 한 번만 실행됩니다.

문서에서:

const [state, setState] = useState(initialState);

initialState 인수는 초기 렌더링 시 사용되는 상태입니다.후속 렌더링에서는 무시됩니다.초기 상태가 값비싼 계산의 결과인 경우 함수를 대신 제공할 수 있습니다. 이 함수는 초기 렌더링에서만 실행됩니다.

const [state, setState] = useState(() => {
      const initialState = someExpensiveComputation(props);
      return initialState;
});

---

^* _{strict 모드일 경우 렌더 메서드가 이중으로 호출되기 때문에 첫 번째 렌더 값도 무시될 수 있습니다.하지만 이것은 이 대답에 중요하지 않다.두 번째 렌더링 후에는 값이 무시되기 때문입니다.}

useState의 초기값을 함수로 사용하려면 currying을 사용해야 합니다.

const [state, setState] = useState(() => () => someValue);

이는 매뉴얼에서 useState는 지정된 함수를 실행하고 그 결과를 초기값으로 간주하기 때문입니다.카레링을 이용해서() => someValue반환되어 초기값으로 간주됩니다.

상태를 초기화하기 위한 부하가 높은 계산이 있을 때는 함수를 사용해야 합니다.그리고 이것은 국가의 초기화를 게으르게 하는 것이다.이것은 kentcdods에 의한 리액트 상태의 게으른 초기화에 관한 잘 쓰여진 블로그입니다.

함수의 랩핑이 계산적으로 덜 무거운 이유는 소품 변경 시 리액션이 성분 함수를 재실행하기 때문입니다.useState()의 내부에 다음과 같은 계산이 있는 경우useState(heavyComputation()), JavaScript는 헤비 컴퓨팅()을 실행하지만,useState(()=>heavyComputation())JavaScript는 헤비 컴퓨팅()을 실행하지 않지만 큐레이션된 함수로 전달되며 useState는 이 함수를 재실행하지 않습니다.

보통의

렌더링 1:useState(heavyComputation()) //JavaScript calls heavyComputation

렌더링 2:useState(heavyComputation()) //JavaScript calls heavyComputation

렌더링 3:useState(heavyComputation()) //JavaScript calls heavyComputation

...

기능성 포장(건조)

렌더링 1:useState(()=>heavyComputation()) //useState() calls heavyComputation

렌더링 2:useState(()=>heavyComputation()) //useState() uses the value from the previous render so heavyComputation() is not called

렌더링 3:useState(()=>heavyComputation()) //useState() uses the value from the previous render so heavyComputation() is not called

...

언급URL : https://stackoverflow.com/questions/60120261/when-to-use-usestate-initial-value-as-function