Activity-proof components

React’s <Activity> component lets you keep a tab rendered but hidden, so switching back to it is instant. On a social app you might keep the Messages tab warm while the user browses the feed. The trap is global side effects. A hidden component that injects styles into the page keeps applying them even while nobody can see it.

The lingering styles

Say the Messages tab enables a focus theme that dims the rest of the app.

function FocusTheme({ children }) {
  return (
    <>
      <style>{`
        :root {
          --feed-dim: 0.4;
        }
      `}</style>
      {children}
    </>
  )
}

When <Activity> hides this tab, the component is not unmounted, so its <style> tag stays in the document. The feed stays dimmed even though Messages is no longer on screen.

The fix

useLayoutEffect cleanup runs when the activity is hidden and reruns when it is shown. Toggle the media attribute on the style tag to switch it off without unmounting.

function FocusTheme({ children }) {
  const ref = useRef(null)

  useLayoutEffect(() => {
    const style = ref.current
    if (!style) return
    style.media = 'all'
    return () => {
      style.media = 'not all'
    }
  }, [])

  return (
    <>
      <style ref={ref}>{`
        :root {
          --feed-dim: 0.4;
        }
      `}</style>
      {children}
    </>
  )
}

Now the styles apply only while the tab is visible and stand down the instant it is hidden.