Supabase Auth监听器导致React组件无限重渲染问题求助

问题根源 #

你的代码存在两个核心问题引发无限重渲染：

1. Context值不稳定：每次AppStateProvider渲染时，都会创建新的contextValue对象，导致MyContext.Provider的value属性频繁变化，触发所有消费该Context的组件重渲染。
2. 未清理Auth状态监听器：onAuthStateChange绑定后未在组件卸载时移除，可能引发不必要的状态更新（即使空依赖的useEffect只会绑定一次，规范清理也能避免潜在的内存泄漏问题）。

修复后的Provider代码 #

import React, { createContext, useState, useEffect, useMemo } from "react";
import { createClient } from "@supabase/supabase-js";
import { supabasekey } from "../../constants";

const supabaseUrl = "https://**************.supabase.co";
const supabase = createClient(supabaseUrl, supabasekey["1"]);

const MyContext = createContext();

const AppStateProvider = ({ children }) => {
  const [state, setState] = useState(null); // 初始化state为null

  useEffect(() => {
    // 获取初始会话
    const getInitialSession = async () => {
      const { data: { session } } = await supabase.auth.getSession();
      setState(session?.user ?? null);
    };
    getInitialSession();

    // 绑定Auth状态变化监听器，并获取取消订阅函数
    const unsubscribe = supabase.auth.onAuthStateChange((_event, session) => {
      setState(session?.user ?? null);
    });

    // 组件卸载时清理监听器
    return () => unsubscribe();
  }, []);

  // 用useMemo缓存contextValue，仅当state变化时更新
  const contextValue = useMemo(() => ({
    state,
    setState
  }), [state]);

  console.log("provider running");

  return (
    <MyContext.Provider value={contextValue}>{children}</MyContext.Provider>
  );
};

export { MyContext, AppStateProvider };

关键修复点 #

• 用useMemo缓存Context值：确保只有state变化时，contextValue才会更新，避免不必要的Provider值变化触发子组件重渲染。
• 添加监听器清理逻辑：onAuthStateChange会返回一个取消订阅函数，在useEffect的返回值中调用，防止组件卸载后监听器仍触发setState。
• 异步函数优化：将getSession包装成async/await形式，代码逻辑更清晰。

额外检查 #

如果子组件中使用了useContext(MyContext)，可确保子组件是纯组件（用React.memo包装），进一步避免不必要的重渲染，但核心重渲染问题已通过上述修复解决。

内容的提问来源于stack exchange，提问作者Stackaccount1