useAtomValue는 atom mount 시 rerender cascade 유발

useAtomValue는 atom mount 시 rerender cascade 유발

jotaiStore.get()으로 직접 가져오기

이건 조금 더 실전 감각이야.

───

먼저 useAtomValue

const value = useAtomValue(someAtom);

이건 뜻이:

• 이 컴포넌트가 someAtom 값을 읽음 • 동시에 구독함 • 그래서 someAtom 바뀌면 이 컴포넌트 재렌더

이건 정상 동작이야.

───

근데 왜 문제될 수 있냐

어떤 컴포넌트나 hook에서 "난 그냥 지금 한 번 값만 필요해" 인데도

const value = useAtomValue(someAtom);

이렇게 해버리면 그 순간부터 구독자가 돼버려.

그러면 나중에 그 atom 바뀔 때마다 이 컴포넌트가 다시 렌더되고, 그게 또 자식들까지 퍼져서 rerender cascade가 생길 수 있어.

───

rerender cascade가 뭐냐

하나의 구독 때문에

• A 재렌더 • A 안의 B도 다시 실행 • B 안의 C도 다시 실행

이런 식으로 연쇄적으로 렌더가 퍼지는 현상이야.

물론 React가 다 최적화는 해주겠지만, 불필요하게 커지면 성능이나 추적성이 안 좋아짐.

───

그래서 jotaiStore.get()은 뭐냐

이건 말 그대로

"구독하지 말고, 지금 값만 그냥 읽자"

는 거야.

예를 들면:

const store = useStore(); const value = store.get(someAtom);

이건:

• 현재 값을 읽기는 함 • 하지만 React hook처럼 구독해서 재렌더 연결하진 않음

즉 snapshot read 느낌.

───

비유

useAtomValue

뉴스 구독 신청

• 새 소식 오면 계속 알림 옴

store.get(atom)

지금 기사 한 번 열람

• 읽고 끝 • 알림 구독 안 함

───

이 프로젝트 주석 뜻

주석에서 말한 건 대충 이거야:

"여기서 useAtomValue 쓰면 이 hook/component가 atom 구독자가 돼서 쓸데없이 ChatView 쪽 렌더를 계속 흔들 수 있으니, 그냥 필요한 순간에만 store.get()으로 읽자"

즉 실시간 반응이 필요 없는 값은 구독하지 말자는 최적화 전략이야.

───

한 번에 요약

atomWithLocalStorage

상태를 localStorage에도 저장해서 새로고침 후에도 유지

atomFamily

키별로 독립된 atom을 여러 개 만들기 위한 패턴

useAtomValue vs store.get()

• useAtomValue = 읽기 + 구독 + 값 바뀌면 재렌더 • store.get() = 지금 값만 1회 읽기, 구독 없음