Next-Auth：防止不必要的会话重新渲染

Question

我目前正在尝试使用next-auth 的会话通过用户 ID 获取一些数据：

const [session] = useSession();

useEffect(() => {
    if (!session) {
        return;
    }

    getProjects(session.user.id).then(setTeams);
}, [session]);

这工作正常，但不知何故最初被渲染两次。此外，更改选项卡并返回也会导致给定钩子的重新渲染。

仅供参考：我使用 SSR 并且已经在 getServerSideProps 中获取会话并将其传递给提供者，我认为这会导致在 init 上进行第二次重新渲染？

<Provider session={pageProps.session}>
    <DataProvider>
        <CustomThemeProvider>
            <GlobalStyle />
            <Navigation />
            <Component {...pageProps} />
        </CustomThemeProvider>
    </DataProvider>
</Provider>

选项卡更改重新渲染来自哪里？

Answer 1

是的，感谢您发布该链接 Juliomalves，这也是我的想法。

他们最近发布了一个 v4 测试版，应该可以更好地处理这个问题。如果您碰巧已经在使用react-query (https://github.com/nextauthjs/react-query)，还有一个替代的客户端 next-auth 库可以重用 react-query 来处理会话状态。