The React state management library for write-heavy applications
Supported languages, frameworks and DBs:
As data and our need to annotate and organize it grows, so does our need for supporting state in write-heavy applications.
To solve this problem, modern write-heavy applications such as Superhuman, Roam Research, and Facebook Messenger built their own embedded data layers to enable these more sophisticated user experiences.
Homebase-react enables developers to access the same embedded datalog database as Roam Research through React hooks. You no longer have to build out a team or learn specialized tools like Clojure in order to build a delightful write-heavy application.
Homebase is executing on the vision of data usage, portability, and management we had when building Firebase. We never got there. I'm excited!
—James Tamplin, Founder/CEO of Firebase
Datalog is the future of end-user programming, personal productivity software, p2p software, etc.
—Chet Corcos, Founding Engineer of Notion
Start by installing homebase-react.
# NPM
npm install homebase-react --save
# Yarn
yarn add homebase-reactOptionally install the datalog-console chrome extension to inspect the homebase-react DB in your browser.
⭐️ 📖 Read the JS docs ⚛️ ⭐️
import { useCallback } from 'react'
import { HomebaseProvider, useEntity, useTransact } from 'homebase-react'
const RootComponent = () => (
// Create a DB and set some starting data
<HomebaseProvider config={{ initialData: [{ counter: { id: 1, count: 0 }}] }}>
<App/>
</HomebaseProvider>
)
const App = () => {
// Get entity id = 1
const [counter] = useEntity(1)
const [transact] = useTransact()
return (
<button onClick={() => {
// Increment and save the count
transact([{ counter: {
id: 1, count: counter.get('count') + 1
}}])
}>
{/* Render the count */}
Increment {counter.get('count')}
</button>
)
}Start by adding homebase-react.
Optionally add datalog-console and its corresponding chrome extension to inspect the DB in your browser.
⭐️ 📖 Read the CLJS docs ƛ ⭐️
(ns homebase.dev.example.reagent.counter
(:require
[datascript.core :as d]
[homebase.reagent :as hbr]
[datalog-console.integrations.datascript :as datalog-console]))
(def db-conn (d/create-conn {}))
(d/transact! db-conn [[:db/add 1 :count 0]]) ; Transact some starting data.
(hbr/connect! db-conn) ; Connect homebase.reagent to the database.
(datalog-console/enable! {:conn db-conn}) ; Also connect the datalog-console extension for better debugging.
(defn counter []
(let [[entity] (hbr/entity db-conn 1)] ; Get a homebase.reagent/Entity. Note the use of db-conn and not @db-conn, this makes it reactive.
(fn []
[:div
"Count: " (:count @entity) ; Deref the entity just like a reagent/atom.
[:div
[:button {:on-click #(d/transact! db-conn [[:db/add 1 :count (inc (:count @entity))]])} ; Use d/transact! just like normal.
"Increment"]]])))Improve developer tools: custom chrome formatters, DB admin console extensionRewrite React ↔ Homebase cacheSupport async DB access (for Datahike)Reactive query planning (better perf on pages with lots of live reads)
- Swap Datascript out for Datahike
- Immutability
- History / Change Tracking
- Persist to IndexedDB
- Local-first conflict resolution for offline caching and sync between multiple devices
Homebase React is currently not a good choice for read-heavy applications (e.g. Twitter, ecommerce). We plan to support these query patterns with our platform eventually.
There isn't much in the way of React friendly datalog DB based state management for Javascript, but there's at least one alternative if you're a Clojure dev.
- If you prefer
d/pulloverd/entitytake a look at Posh. It supports less of thed/qAPI, but provides more tools for tuning performance.
yarn install
yarn devyarn install
yarn testWelcome and thank you! Writing docs, patches and features are all incredibly helpful and appreciated.
We only ask that you provide test coverage for code changes, and conform to our commit guidelines.
- Chris Smothers (@csmothers) – Homebase
- JB Rubinovitz (@rubinovitz) – Homebase