Recoil 패턴 : Intermediate Selectors (중간 선택자로 리렌더링 최적화)

https://learnrecoil.com/video/intermediate-selectors

Intermediate Selectors - Free Recoil.js Course

아래와 같은 atomFamily가 있다고 하자.

해당 아톰은 드래그, 크기 조정 시마다 position이 변경된다.

export type ElementStyle = {
    position: {top: number; left: number}
    size: {width: number; height: number}
}

export type Element = {
    style: ElementStyle
    image?: {src: string; id: number}
}

export const defaultStyle = {
    position: {top: 0, left: 0},
    size: {width: 200, height: 200},
}

export const elementState = atomFamily<Element, number>({
    key: 'element',
    default: {
        style: defaultStyle,
    },
})

// 선택된 atom id를 기억
export const selectedElementState = atom<number | null>({
    key: 'selectedElement',
    default: null,
})

만약 해당 atom(Element)의 img.id 변경 시에만 상태틀 업데이트 하고 싶다면 어떻게 할까? (혹은 데이터 조회)

이를 위해 중간 Selector를 이용한다.

// 해당 상태는 elementState가 변경될 때마다 상태를 다시 계산하지만, 리턴하는 id는 변경되지 않을 수 있다.
const imageIdState = selector({
    key: 'imageId',
    get: ({get}) => {
        const id = get(selectedElementState)
        if (id == null) return
        return get(elementState(id)).image?.id
    },
})

// imageIdState가 변경되지 않으면 해당 아톰을 구독하는 컴포넌트는 호출되지 않는다.
const imageInfoState = selector({
    key: 'imageInfo',
    get: ({get}) => {
        const imageId = get(imageIdState)
        if (imageId == null) return
        return callApi('image-details', {queryParams: {seed: imageId}})
    },
})