[TIL] React Recoil (useRecoilState, useRecoilValue)

Atom Hook

const counter = atom({
  key: 'myCounter',
  default: 0,
});

useRecoilState

atom, selector의 값을 읽고 쓰려고 할 때 사용한다.
useState()와 비슷한 형태로 생겼지만 기본값 대신 recoil의 상태로 인자를 받는다.
상태가 없데이트가 되면 자동적으로 리렌더링이 된다.

// useRecoilState
const [count, setCount] = useRecoilState(countState);

const increaseCount = () => {
	setCount(count + 1);
}

사용법은 [get, set]으로 useState와 동일하다.

selector의 경우 set을 설정해 주지 않았다면 사용하지 못한다.(set을 설정해야만 쓰기 가능한 상태로 바뀌기 때문에 그 전까지는 읽기 전용 상태이다)

useREcoilValue

atom을 읽을 때만 사용한다.(Recoil 상태의 값을 반환)

const count = useRecoilValue(countState);

useSetRecoilState

atom을 쓰려고 할 때만 사용된다.(Recoil 상태의 값을 업데이트하기 위한 setter 함수를 반환)

컴포넌트를 atom에 등록하지 않기 때문에 atom값이 변경된다 하더라도 리렌더링 되지 않는다.
그래서 무작정 useRecoilState() 훅만 사용하려고 하지말고 atom값을 사용하지 않는다면 useSetRecoilState 훅을 사용하는 것이 좋다.

const setCount = useSetRecoilState(countState);
...<Button onClick={()=>{setCount(prev=>prev+1)}}>...

useResetRecoilState

atom이나 selector의 값을 초기화하고 싶을 때 사용한다.

const resetCount = useResetRecoilState(countState);
...
<button onClick={resetCount}>reset count</button>

selector의 경우

// sumCountSelector.ts
import { DefaultValue, selector } from "recoil";
import countState from "../atom/countState";

export default selector({
    key: "countSelector",
    get: ({get}): number => {
        const count = get(countState);
        return count + 1;
    },
    set: ({set, get}, newCount:any)=>{
        return set(
            countState,
            newCount instanceof DefaultValue?newCount:newCount+10,
        )
    }
})

// handleCount.tsx
const resetSumCount = useResetRecoilState(sumCountSelector);
...
<button onClick={resetSumCount}>reset count</button>

useResetRecoilState로 selector를 초기화 시킬 경우 set은 DefaultValue 객체를 매개변수로 전달는다.

따라서 selector에서 set을 사용할 때 조건 처리를 해주어야 한다.

위 코드에서는 일반적으로 set을 할 경우 받아온 카운트에 10을 더해서 반환하지만, DefaultValue가 오게 되면 초깃값을 반환된다.

useRecoilCallback

useCallback() 훅과 비슷하지만 Recoil상태에서도 callback이 동작하도록 한다.

Recoil상태의 Readable-only Snapshot에 접근할 수 있는 callback 을 만들기 위해 사용될 수 있다.(주로 여기에 사용)

• atom 혹은 selector가 업데이트 될때 리렌더링 하기위해 컴포넌트를 구독하지않고 비동기적으로 Recoil 상태를 읽기위해
• 렌더링 할 때 수행하고 싶지 않은 비동기 동작을 연기할 떄
• pre-fetching을 진행할 때