Curls, clouds and code

Hi, my name is Corstian, and this is my blog where I get to publish my writings on topics such as psychology, philosophy, software development and any other thing I deem worthy to write about.

Force a component to unmount with React Navigation

Published on the
software development

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 */}
        </>
      }
    </>
  )
}

Share this post:


Subscribe for more goodness!

👉 Do you like what I'm writing? Sign up to receive new content straight into your mailbox!