React state is undefined when reading inside of an callback function

Question

I am trying to read a react state when the callback of chrome.tabs.onUpdated.addListener is being called, but it seems the state value is undefined, even though it's set previously.

Here is the hook that I have made.

export const useCurrentTab = () => {
    const [currentTab, setCurrentTab] = useState<chrome.tabs.Tab | undefined>(undefined)
    const [activeTabId, setActiveTabId] = useState<number | undefined>(undefined)

    const getActiveTab = async () => {
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
        console.log(`Setting current tab id to ${tab?.id}`)
        setActiveTabId((prevActiveTabId) => tab?.id || prevActiveTabId)
        return tab
    }

    const updateCurrentTab = (
        tabId: number,
        changeInfo: chrome.tabs.TabChangeInfo,
        tab: chrome.tabs.Tab
    ) => {
        console.log("updateCurrentTab", activeTabId, currentTab, tabId);
        if (changeInfo.status === 'complete' && tabId === activeTabId) {
            console.log(`Tab ${tabId} status changed to ${changeInfo.status}`)
            setCurrentTab(tab)
        }
    }

    useEffect(() => {
        getActiveTab().then((tab) => {
            if (tab && tab.status === 'complete') {
                setCurrentTab(tab)
            }
        })

        chrome.tabs.onUpdated.addListener(updateCurrentTab)

        return () => {
            chrome.tabs.onUpdated.removeListener(updateCurrentTab)
        }
    }, [])

    return currentTab
}

the issue is currentTab isn't updated after the page is loaded, I have debugged and pin pointed the issue by adding console logs.

console.log("updateCurrentTab", activeTabId, currentTab, tabId);

when logging, it shows the activeTabId is undefined, so the check for tabId === activeTabId fails here.

here is the console log in order.

current-tab.tsx:15 Setting current tab id to 1494595641
current-tab.tsx:25 updateCurrentTab undefined undefined 1494595641

Nicholas Tower · Accepted Answer · 2024-04-24 15:46:30Z

 }, [])

You have passed in an empty dependency array. That means that the effects gets set up on the first render, and never again. Since it's set up on the first render, updateCurrentTab closes over the state value that existed during that first render, which is undefined.

To fix this, you will need to let your effect update as the state changes. I assume getActiveTab is still only supposed to be called once, so you'll want to split your code into two effects, so they can have different dependency arrays. Also, i recommend you move the functions inside the effects, unless they're needed by other parts of the component

useEffect(() => {
  const getActiveTab = async () => {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true,
    });
    console.log(`Setting current tab id to ${tab?.id}`);
    setActiveTabId((prevActiveTabId) => tab?.id || prevActiveTabId);
    return tab;
  };

  getActiveTab().then((tab) => {
    if (tab && tab.status === "complete") {
      setCurrentTab(tab);
    }
  });
}, []);

useEffect(() => {
  const updateCurrentTab = (
    tabId: number,
    changeInfo: chrome.tabs.TabChangeInfo,
    tab: chrome.tabs.Tab,
  ) => {
    console.log("updateCurrentTab", activeTabId, currentTab, tabId);
    if (changeInfo.status === "complete" && tabId === activeTabId) {
      console.log(`Tab ${tabId} status changed to ${changeInfo.status}`);
      setCurrentTab(tab);
    }
  };

  chrome.tabs.onUpdated.addListener(updateCurrentTab);

  return () => {
    chrome.tabs.onUpdated.removeListener(updateCurrentTab);
  };
}, [activeTabId, currentTab]); // <------- new dependency array

You are a legend, I have been trying to fix this for hours now, I tried to set activeTabId, but it would cause it to run recursively.

Collectives™ on Stack Overflow

React state is undefined when reading inside of an callback function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related