[SSR] Resolve promise on server side rendering as endBatch is only called on useEffect

[tirthbodawala]

Reference Issue: #1960

The function sendEndOfBatchNotifications is only executed on useEffect as below:

useEffect(() => {
    // enqueueExecution runs this function immediately; it is only used to
    // manipulate the order of useEffects during tests, since React seems to
    // call useEffect in an unpredictable order sometimes.
    Queue.enqueueExecution('Batcher', () => {
      endBatch(storeRef.current);
    });
  });

This caused the SSR usage of async selector to get stuck in infinite loading.

With this PR, we make sure that when the original promise is resolved, we resolve the handleLoadable promise as well. Thus making it compatible with SSR rendering

[tirthbodawala]

Hi Team,
I have also added the catch block in case the promise fails on SSR, thus making sure that the returned promise is properly rejected and the ErrorBoundary can handle it.

[tirthbodawala]

@wd-fb @drarmstr please review and let me know your thoughts and improvements in this PR

[drarmstr]

use .finally() instead?

[facebook-github-bot]

@drarmstr has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[tirthbodawala]

Ah sure. Let me update the PR in next 30 mins. :)

On Wed, 2 Nov 2022 at 11:54 PM, Douglas Armstrong ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In packages/recoil/hooks/Recoil_Hooks.js <#2073 (comment)> : > @@ -58,8 +60,22 @@ function handleLoadable<T>( if (loadable.state === 'hasValue') { return loadable.contents; } else if (loadable.state === 'loading') { - const promise = new Promise(resolve => { - storeRef.current.getState().suspendedComponentResolvers.add(resolve); + const promise = new Promise((resolve, reject) => { + const suspendedComponentResolvers = storeRef.current.getState().suspendedComponentResolvers; + suspendedComponentResolvers.add(resolve); + if (isSSR && isPromise(loadable.contents)) { + loadable + .contents + .then((d) => { use .finally() instead? — Reply to this email directly, view it on GitHub <#2073 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACWDN75WVN254HRT7WMUX2LWGKWXDANCNFSM6AAAAAARKF5P6U> . You are receiving this because you authored the thread.Message ID: ***@***.***>

-- Tirth Bodawala Co-Founder [image: Atyantik Technologies] +917600540105 [image: Atyantik Technologies] <https://www.atyantik.com/> www.atyantik.com [image: linkedin] <https://www.linkedin.com/company/atyantik-technologies> [image: facebook] <https://www.facebook.com/atyantik> [image: instagram] <https://github.com/Atyantik> CONFIDENTIALITY NOTICE: The contents of this email message and any attachments are intended solely for the addressee(s) and may contain confidential and/or privileged information and may be legally protected from disclosure. If you are not the intended recipient of this message or their agent, or if this message has been addressed to you in error, please immediately alert the sender by reply email and then delete this message and any attachments. If you are not the intended recipient, you are hereby notified that any use, dissemination, copying, or storage of this message or its attachments is strictly prohibited.

[drarmstr]

Hmm, this shouldn't work as-is since Recoil_isPromise.js exports the function directly. Is this the version you tested with?

I updated the diff to fix this import and use finally() instead, though unfortunately the changes won't sync back to this PR. I'll test with internal unit tests but we don't have a good SSR test so please try it out after it merges?

[tirthbodawala]

@drarmstr a fix related to this integrated in any version that I can pull and test?

[vine1993]

im trying to use the recoil version 0.77 with nextjs14 and I'm still getting the same timeout error

@tirthbodawala .

import { ReactNode, Suspense } from "react";

import { RecoilContext } from "./recoil";
import StyledJsxRegistry from "./registry";
import { LayoutTheme } from "./layoutTheme";


export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <RecoilContext>
          <StyledJsxRegistry>
            <Suspense fallback={"CARREGANDO AE"}>
              <LayoutTheme>
                {children}
              </LayoutTheme>
            </Suspense>
          </StyledJsxRegistry>
        </RecoilContext>
    </body>
    </html>
  );
}

export function LayoutTheme({ children }: { children: React.ReactNode }) {
    //@ts-ignore
    const tenant = useRecoilValue<typeof TENANT>(tenantState)
 
    return (
        <>
            <style jsx global>{`
                :root {${tenant.tailwind_theme}}
            `}
            </style>
            {children}
        </>
    )
}

export const tenantState = selector({
    key: 'tenantState',
    get: async () => {
        return await new Promise(resolve => setTimeout(()=> resolve(TENANT2),2000))
    }
})