http-react is a data manager

index.tsx

import useFetch from 'http-react'

// The store. Because no url is passed, no request is sent
function useCount() {
  const { data, mutate } = useFetch({
    id: 'count',
    default: 0
  })

  return [
    data,
    mutate,
    {
      increase() {
        mutate(c => c + 1)
      },
      decrease() {
        mutate(c => c - 1)
      }
    }
  ] as const // [state, setState, actions]
}

function Counter() {
  // everything is statically typed!
  const [count, setCount, actions] = useCount()

  return (
    <div>
      <p>{count}</p>
      <button onClick={actions.increase}>Add</button>
    </div>
  )
}

export default function Page() {
  return (
    <div>
      <Counter />
      <Counter />
    </div>
  )
}

The count state is shared in both <Counter />