0

I am working on a favicon component, which will go into the <HEAD> within DOM.

I want to set a recoil state so that based on user actions, I can update the favicon & show updates to the user on the browser tab.

The favicon component is simply like this for now:

const Favicon: FC = () => {
  const favNotice = useRecoilValue(faviconSt);
  return (
    <link rel="icon" href={favNotice ? "favicon_heart.svg" : "favicon.svg"} />
  );
};

I am getting the error:

TypeError: Cannot read properties of null

I am not clear why this is the case. Here is my main component, which shows that the recoil root state is initialised before the page component is rendered. The page component is wrapped within a <Layout> component & it is the Layout component, within which, I render the Favicon component.

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout || (page => page);

  return (
    <ErrorBoundary
      FallbackComponent={RootErrorFallback}
      onReset={useQueryErrorResetBoundary().reset}>
      <RecoilRoot>
        <div className="__APP__">
          <div className="pageContainer">
            <Suspense fallback={<Loader />}>
              {getLayout(<Component {...pageProps} />)}
            </Suspense>
          </div>
          <Overlay />
        </div>
      </RecoilRoot>
    </ErrorBoundary>
  );
}

I dont understand why the recoil state is not read within the component when the recoil-root has already been intialised?

Kayote
  • 14,579
  • 25
  • 85
  • 144
  • Are you sure the error refers to the `const favNotice = useRecoilValue(faviconSt);` line? Also I notice that you are using Next.js. Recoil is not yet officially compatible with SSR, so there might be unexpected behavior/bugs/errors – Johannes Klauß Jan 19 '22 at 10:01
  • I am fairly certain its to do with Recoil, as the component works fine without any state. If I subscribe to any of the recoil atoms, I get the error. Your second point may well answer this. Thank you. – Kayote Jan 19 '22 at 11:16
  • 1
    Maybe you should post this in the recoil repo, just to clarify if this indeed is a bug related to the SSR compliance. – Johannes Klauß Jan 19 '22 at 14:10

0 Answers0