Skip to main content

React + Datalog

How to use in React

There's a helper package called @datalogui/react that includes a couple helpful hooks.

At the time of this writing there's just one:


This hook returns all the data gathered from the query and will request a re-render when one of the query dependencies change.

Here's a typescript example:

interface TodoInterface {
id: string;
text: string;
isCompleted: boolean;

// Our main Todos table
const Todos = datalog.newTable<TodoInterface>({
id: datalog.StringType,
text: datalog.StringType,
isCompleted: datalog.BoolType

function AllTodos() {
// A simple query to return all the todos not completed
const todos = useQuery(({id, text}: TodoInterface) => {
Todos({id, text, isCompleted: false})

<h2>Your todos are:</h2>
{ => (<p key={}>{todo.text}</p>))}