나는 React useState Hook이 마음에 들지 않아서 직접 만들어서 오픈 소스로 만들었습니다.

Link to my project, please star it if you like it!

며칠 전 나는 React로 작업하고 있었고, 1000번째로 부실 상태 문제로 어려움을 겪었습니다.

부실 상태 문제는 무엇입니까?

오래된 상태 문제는 useState가 있고 후크의 주어진 setState 함수를 사용하여 해당 상태를 업데이트하는 경우입니다. React가 구성 요소를 다시 렌더링할 때까지 상태는 오래되어 업데이트되지 않습니다.

부실 상태의 예는 다음과 같습니다.

const [count, setCount] = useState(0)
setCount(count + 1);
console.log(count); // Expecting 1, receiving 0 instead.
setTimeout(() => {
  setCount(count + 1);
}, 1000); // Expecting 2, receiving 1 instead.

언급했듯이 React가 구성 요소를 다시 렌더링할 때까지 상태가 오래되기 때문에 위의 코드는 예상대로 작동하지 않습니다.

이는 React가 다시 렌더링할 때마다 구성 요소 함수를 다시 생성하여 변수에 대한 일관된 참조를 효과적으로 방지하기 때문입니다.

이것은 useAtom이 들어오는 곳입니다.

React의 상태 메커니즘인 프록시 패턴과 관찰자 패턴useAtom을 혼합하여 사용하면 상태가 완전하고 완전하게 반응할 수 있으므로 위에서 언급한 오래된 상태 문제를 방지할 수 있습니다.
이렇게 하면 React가 아직 구성 요소를 다시 렌더링하지 않은 경우에도 상태가 항상 최신 상태임을 확인할 수 있습니다.
예시:

const atomTest = useAtom(0);
console.log(atomTest.value); // 0, as expected
atomTest.value++;
console.log(atomTest.value); // 1, as expected
setTimeout(() => {
  atomTest.value++;
}, 1000); // 2, as expected

상태가 부실하지 않기 때문에 위의 코드는 예상대로 작동합니다. useAtom 후크는 즉시 상태를 업데이트하고 value 속성도 업데이트합니다.

원자에 무엇을 넣을 수 있습니까?

프리미티브(문자열, 숫자 등), 배열 및 객체 모두에 useAtom 후크를 사용할 수 있습니다. 함수와 함께 사용할 수 없습니다.
내부적으로 후크는 배열 또는 객체의 모든 프리미티브에 대한 원자를 생성합니다.

  const atomObj = useAtom({
    a: 1,
    b: 10,
    c: 100,
  });

  atomObj.a.value = 2; // This will update the state
  console.log(atomObj.a.value); // 2, as expected

  const atomArr = useAtom([1, 2, 3, 4, 5]);

  atomArr[0].value = 10; // This will update the state
  console.log(atomArr[0].value); // 10, as expected

useAtom과 useState의 차이점은 무엇입니까?

차이점은 useAtom는 프록시 기반 구현 덕분에 상태 변수를 즉시 업데이트하는 반면 useState는 React가 구성 요소를 다시 렌더링할 때까지 상태 변수를 업데이트하지 않는다는 것입니다.

useAtom과 useRef의 차이점은 무엇입니까?

차이점은 useAtom는 변경 시 구성 요소를 다시 렌더링하지만 useRef는 그렇지 않다는 것입니다.

변경 사항을 구독하려면 어떻게 해야 합니까?

관찰자 패턴을 준수하려면 subscribe 메서드를 사용하여 변경 사항을 구독 및 구독 취소할 수 있습니다.

const atomTest = useAtom(0);
const atomObserver = (newValue, oldValue) => {
  console.log(`New value: ${newValue}, old value: ${oldValue}`);
};
atomTest.subscribe(atomObserver);
atomTest.value++;
atomTest.unsubscribe(atomObserver);

useEffect 후크를 계속 사용하려면 어떻게 해야 합니까?

보다 표준적인 접근 방식을 선호하는 경우 후크는 React 상태 값을 포함하는 state 속성을 노출하여 평소와 같이 useEffect 후크를 사용할 수 있습니다.

const atomTest = useAtom(0);
useEffect(() => {
  console.log(`New value: ${atomTest.state}`);
}, [atomTest.state]);
atomTest.value++;

첫 번째 구성 요소 마운트에서 구독 콜백을 트리거하려면 어떻게 해야 합니까?

원자 구성을 포함할 useAtom 후크에 두 번째 매개변수를 전달할 수 있습니다.triggerOnMount 속성을 사용하여 첫 번째 구성 요소 마운트 시 구독 콜백을 트리거할 수 있습니다.
이는 리액티브 프로그래밍의 Behaviour Subject와 유사한 방식으로 작동하며 useEffect 후크와 동일하게 작동합니다.

const atomTest = useAtom(0, {
  triggerSubscribeOnMount: true,
});
atomTest.subscribe((newValue, oldValue) => {
  console.log(`New value: ${newValue}, old value: ${oldValue}`);
}); // This will be logged at first component mount with initial value of 0.

내 구현에 대해 어떻게 생각하는지 알려주고 useAtom 후크가 도움이 된 몇 가지 사용 사례를 공유하십시오!