suspense 관련 에러 해결

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

==> 문제의 자식 컴포넌트(suspense로 감싸져 있음)와 관련된 모든 useEffect + useState를 그 컴포넌트안으로 넣었더니 해결.

또는 부모를 React.Suspense로 감싸고 fallback을 설정해주었더니 해결

==> https://github.com/YeonghunKO/chat-app-client/blob/main/src/components/ContactInfo/UsersListContainer.tsx 참고

==> https://velog.io/@leejungho9/Error-A-component-suspended-while-responding-to-synchronous-input.-This-will-cause-the-UI-to-be-replaced-with-a-loading-indicator.-To-fix-updates-that-suspend-should-be-wrapped-with-startTransition 참고

This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

==>. useEffect + useState isMounted로 해결. 마운트 되지 않았으면 그냥 null을 리턴. 아래처럼

const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null;
  }

return ....