Curls, clouds and code

A blog by Corstian BoermanCorstian Boerman (self portrait)

Force a component to unmount with React Navigation

Corstian Boerman
Corstian Boerman
Reading time: a minute

While developing a realtime feature within a React Native app I discovered a specific quirk within the React Native Navigation library which leaves components mounted, even after the active route has changed. Based on the documentation I believe this has been an intentional design decision, though I couldn't find any specifics about this.

The issue manifested itself when working with a GraphQL subscription which kept receiving data even after one navigated away from the page (component). This resulted in an unnecessary CPU and memory drain and impacted performance of the application. As stated within the Apollo GraphQL documentation, the useSusbcription hook should automatically unsubscribe once the component is unloaded.

Additionally, React Native Navigation introduces an additional hook which represent two lifetime events within the framework, named useFocusEffect.

In retrospect the solution to my specific issue seems embarrassing easily, though it took me half a day to figure out. It involves in rendering some JSX based on a variable set using this custom useFocusEffect hook;

import React, { useState, useCallback } from 'react'
import { useFocusEffect } from '@react-navigation/native'

export default function Live() {
  const [isVisible, setIsVisible] = useState(false)

  useFocusEffect(
    useCallback(() => {
      setIsVisible(true)

      return () => {
        setIsVisible(false)
      }
    }, [])
  )

  return (
    <>
      {isVisible && 
        <>
          {/* Your component goes here */}
        </>
      }
    </>
  )
}

Hey there, I hope you enjoyed this post of mine. If you did, consider sharing this with that one friend who'd also appreciate this. Comments are gone for the time being, but if you feel like discussing something more in-depth, send me a message on Twitter, or just email me.

- Corstian