React: Unfinished 1-level deep navigation stack

index.tsx

import React, { useContext, useState, useEffect } from 'react'

interface NavigationItem {
  back: string
  title: string
}

interface ContextType {
  active: NavigationItem | null
  setActive: (active: NavigationItem | null) => void
}

const Context = React.createContext<ContextType>({
  active: null,
  setActive: () => {}
})

/**
 * Provides a 1-level deep stack for the NavigationBar to show either a normal navigation bar or a back button
 */
export function NavigationProvider({ children }: { children: React.ReactNode }) {
  const [active, setActive] = useState<NavigationItem | null>(null)

  return <Context.Provider value={{ active, setActive }}>{children}</Context.Provider>
}

/**
 * Used by the navigation bar to access state
 */
export function useNavigation() {
  return useContext(Context)
}

/**
 * Used by actual screens to update title and state
 */
export function useNavigationStack(item: NavigationItem): void {
  const context = useNavigation()

  useEffect(() => {
    context.setActive(item)

    return () => {
      context.setActive(null)
    }
  }, [])
}