React 19에서 use() 훅 써보신 분?

저는 리액트 19 베타에서 토이 프로젝트로 써봤는데, use()가 Suspense랑 자연스럽게 연동되는 게 좋았어요. 다만 아직 안정화되지 않아서 공식 문서 예시가 더 나오길 기다리는 중이에요. 혹시 use() 안에 조건문을 넣으면 어떻게 되나요?

오 저도 베타 문서 보고 신기했어요! 근데 Suspense랑 쓸 때 에러 바운더리 처리는 어떻게 하나요? use()가 Promise를 던지면 자동으로 잡아주는 건가, 아니면 따로 ErrorBoundary를 감싸야 하는 건지 궁금하네요.

아직 써보진 않았지만, use()가 Context도 resolve 해준다는 점이 흥미롭네요. useContext보다 더 직관적일 수도 있을 것 같아요. 근데 Suspense랑 함께 쓸 때 서버 컴포넌트에서도 동작하는지 궁금하네요. 혹시 아시는 분?

실제로 써봤는데, 기존의 useEffect + useState 조합보다 훨씬 깔끔하더라고요. Suspense랑 연동하려면 부모 컴포넌트를 <Suspense fallback={<Loading />}>으로 감싸기만 하면 돼요. 단점은 아직 실험적이라 프로덕션에 쓰긴 조심스러워요.

와 React 19 기대되네요! use()로 Promise를 직접 resolve 하면 코드가 확실히 간결해질 것 같아요. 근데 기존의 react-query나 swr 같은 라이브러리랑 비교하면 어떤가요? 캐싱이나 리패칭 기능이 부족할 수도 있을 것 같은데.

저는 아직 안 써봤는데, use()가 Context도 resolve 해준다니까 useContext를 대체할 수도 있나요? 예를 들면 const theme = use(ThemeContext) 이런 식으로? 혹시 아시는 분 계신가요?

저도 궁금해서 찾아봤는데, use()는 Suspense 경계 안에서 Promise를 직접 resolve 해주는 방식이에요. 예를 들어 const data = use(fetchData())처럼 쓰면 Suspense가 로딩 상태를 자동으로 처리해줍니다. 간단한 코드로는 function Profile() { const user = use(fetchUser()); return <div>{user.name}</div>; } 이런 식이에요.

간단한 예시 공유합니다: function Comments() { const comments = use(fetchComments()); return comments.map(c => <p key={c.id}>{c.text}</p>); } 이걸 <Suspense>로 감싸면 로딩 중엔 fallback이 보여요. 근데 여러 개의 use()를 쓰면 각각 Suspense가 중첩돼야 해서 구조가 좀 복잡해질 수 있어요.

저도 시도해봤는데, use()는 조건문이나 루프 안에서 못 쓴다고 하더라고요. 훅 규칙을 따라야 해서 최상위에서만 호출 가능해요. Suspense랑 쓰려면 데이터 fetching 로직을 분리하는 게 좋을 것 같아요.

저도 궁금해서 베타에서 실험해봤는데, use()는 Suspense의 throw promise 패턴을 추상화한 거예요. 그래서 내부적으로는 컴포넌트가 Promise를 던지고 Suspense가 잡아서 fallback을 보여주는 식으로 동작해요. 코드 예시는 function Data() { const data = use(fetchData()); return <div>{data}</div>; } 이렇게 간단해요.