반응 - 상태에서 약속 가져오기???

사람들이 말했듯이 "작동하지 않는 것은 어리석은 일입니다."

당신이 모를 수도 있는 기본 사항

우선 초기화

다음과 같이 상태를 초기화하는 것이 관례입니다.

const [state, setState] = useState();

하지만… useState는 배열을 반환하는 함수일 뿐이며 후크 규칙을 위반하지 않는 한 원하는 위치에 덤프할 수 있습니다.

그리고 우리가 하는 동안 함수로 초기화할 수 있습니다. 해당 함수는 무엇이든 상관없이 한 번만 실행됩니다.

두 번째로 상태가 될 수 있는 것은

아무것! (내가 아는 한 =p)

그러면 promise는 어떻습니까? 예, 상태에서 약속을 가질 수 있습니다. 물론 JSX 부분 내에서 압축을 풀 수 없습니다.

첫 번째 버전

이를 염두에 두고 아마 다음과 같은 생각을 하고 있을 것입니다.

function FirstVersion() {
  const [state, setState] = useState(() =>
    fakeFetch("First Version!")
      .then((val) => setState(val))
      .catch((err) => setState(err))
  );
  return (
    <div style={{ marginTop: "2em" }}>
      {
        (state instanceof Promise) 
          ? "Loading First Version Component..." 
          : state
      }
    </div>
  );
}

그리고 그것은 효과가 있을 것입니다!

useState 약속

그래서 저는 이 커스텀 훅을 가지고 놀았습니다.

import { useEffect, useState } from "react";

export function useStatePromise(promise) {
  const [error, setError] = useState(null);
  const [value, setValue] = useState(() => {
    promise
      .then((val) => setValue(val))
      .catch(setError);
  });
  const [newValue, setNewValue] = useState(null);

  useEffect(() => {
    if (newValue instanceof Promise) {
      newValue.then(setValue).catch(setError);
    } else {
      setValue(newValue);
    }
  }, [newValue, setValue]);

  return [value, setNewValue, error];
}

첫 번째 버전에서 수행한 작업에 추가하여 먼저 사용자 지정 후크로 추출한 다음 상태를 변경할 수 있는 방법을 추가했습니다. 이는 완료될 때까지 약속을 유지하기 위해 다른 상태를 사용하여 수행됩니다.

예제 프로젝트

See in CodeSandbox

보너스 - useRef 약속

내가 거기에 있었기 때문에 나는 또한 useRef

import { useRef } from "react";

export function useRefPromise(promise) {
  const ref = useRef(promise.then((val) => (ref.current = val)));

  if (ref.current instanceof Promise) {
    return null;
  }

  return ref.current;
}

예제를 열었다면 작동하는 것을 볼 수 있습니다. 하지만 조심하세요!
useEffect가 최신 참조 값을 선택하도록 강제 렌더링을 유지하기 때문에 작동합니다. 그래서… 몇 가지 시나리오에서는 작동할 것입니다.
useEffect로 setInterval를 주석 처리하고 어떻게 작동하는지 확인하십시오.

아웃트로

React 함수는 말그대로 함수입니다. 네, 백그라운드에서 많은 일들이 일어나고 있지만, 여러분이 염려하는 한, 그것은 기능이고 그래서 여러분은 그것으로 미친 짓을 할 수 있습니다.

그런 다음 다시 말하지만, 이 모든 것은 실제로 어떤 식으로든 도움이 될 사례가 없는 한 실제로 사용해서는 안 되는 나쁜 아이디어일 수 있습니다.


표지 사진 작성자: Womanizer Toys on Unsplash