fix: try to avoid unneeded re-rendering if we unmount while in the process of mounting

This commit is contained in:
Derrick Hammer 2023-10-12 04:25:28 -04:00
parent fa0bfb0015
commit 92c18ca940
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
1 changed files with 15 additions and 11 deletions

View File

@ -43,9 +43,10 @@ const LumeContext = createContext<LumeContextType | undefined>(undefined);
const LumeProvider = ({ children }) => { const LumeProvider = ({ children }) => {
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [ready, setReady] = useState(false); const [ready, setReady] = useState<boolean>(false);
const [lume, setLume] = useState<LumeObject>({ networks: [] }); const [lume, setLume] = useState<LumeObject>({ networks: [] });
const statusUnsubs = useRef(new Map()); const statusUnsubs = useRef(new Map());
const isMounted = useRef(true); // Use a ref to track mounting
const handleStatusUpdate = useCallback((id, newNetwork) => { const handleStatusUpdate = useCallback((id, newNetwork) => {
setLume((prevLume) => { setLume((prevLume) => {
@ -64,7 +65,6 @@ const LumeProvider = ({ children }) => {
for (const type of types) { for (const type of types) {
const list = await networkRegistry.getNetworksByType(type); const list = await networkRegistry.getNetworksByType(type);
for (const module of list) { for (const module of list) {
const client = createNetworkClient(module); const client = createNetworkClient(module);
const name = await client.name(); const name = await client.name();
@ -96,25 +96,29 @@ const LumeProvider = ({ children }) => {
statusUnsubs.current.forEach((unsub) => unsub()); statusUnsubs.current.forEach((unsub) => unsub());
statusUnsubs.current = newStatusUnsubs; statusUnsubs.current = newStatusUnsubs;
if (isMounted.current) {
setLume((prevLume) => ({ setLume((prevLume) => ({
...prevLume, ...prevLume,
networks: Array.from(newNetworksMap.values()), networks: Array.from(newNetworksMap.values()),
})); }));
}
} catch (error) { } catch (error) {
if (isMounted.current) {
console.error("Error fetching and updating networks:", error); console.error("Error fetching and updating networks:", error);
} }
}
}; };
useEffect(() => { useEffect(() => {
fetchAndUpdateNetworks(); fetchAndUpdateNetworks();
loginComplete().then(() => isMounted.current && setIsLoggedIn(true));
loginComplete().then(() => setIsLoggedIn(true)); init().then(() => isMounted.current && setReady(true));
init().then(() => setReady(true));
const subDone = networkRegistry.subscribeToUpdates(fetchAndUpdateNetworks); const subDone = networkRegistry.subscribeToUpdates(fetchAndUpdateNetworks);
return () => { return () => {
subDone(); isMounted.current = false; // Track component unmounting
subDone?.();
statusUnsubs.current.forEach((unsub) => unsub()); statusUnsubs.current.forEach((unsub) => unsub());
}; };
}, [fetchAndUpdateNetworks]); }, [fetchAndUpdateNetworks]);