Global selection status using swr

[pke]

I wonder if similar to local state sharing a global selection state could be held with swr.

// I have a button that checks if the current selection offers a "delete" function
const FloatingDeleteButton = () => {
  const { selection } = useSelection()

  if (typeof selection?.delete === "function") {
    return <Button title="Delete" onPress={selection.delete}/>
  }
  return null
}

// And I have a page that offers a selection
const ItemPage () => {
  const { items, deleteItems } = useItems()
  useSelection(items && { delete: deleteItems }) 
}

I have implemented this hook:

import React from "react"

import useSWR from "swr"

type Selection = any | any[]

export default function useSelection(selection?: Selection) {
  const { data, mutate } = useSWR<Selection>("/selection", { initialData: undefined })

  React.useEffect(() => {
    const prev = data || null
    setSelection(selection)
    return () => setSelection(prev || null)
  }, [])

  const setSelection = React.useCallback((selection: Selection) => {
    mutate(selection, false)
  }, [mutate])

  return {
    selection: data,
    setSelection,
  }
}

When the ItemPage is unmounted, the previous selection should be active again.
When useSelection is called without an argument, then the current selection should not be altered.

I am currently using this in react-navigation screens and it somehow always displays the delete button, even when no selection should be set.

I also have a dependency problem, when I want to refer to the outer items like this:

const { items, deleteItems } = useItems()  
useSelection(items && { delete() {
  Alert.alert(items.length)
}}) 

Then items is undefined. I guess I have to add some dependency array to my hook to get the current reference to the items when the delete function is called.

I noticed that calling mutate(undefined, false) on unmount does not actually change anything but calling with null does.

Does this make sense?