TodoProvider with a simple reactive store

TodoProvider.tsx

import React, { PropsWithChildren, useMemo } from 'react';
import { createSimpleReactiveStore } from './simple-reactive-store';

export type Todo = {
  id: string;
  name: string;
};

export type TodoAPI = {
  addTodo: (todo: Todo) => void;
  setTodo: (todo: Todo) => void;
  useTodo: (id: string) => Todo | undefined;
  useTodoList: () => string[];
};

const TodoContext = React.createContext<TodoAPI>({} as TodoAPI);

const TODO_LIST_PATH = 'todoList';

export function TodoProvider(props: PropsWithChildren<{}>) {
  const store = useMemo(() => createSimpleReactiveStore(), []);

  const api = useMemo(
    () => ({
      addTodo: (todo: Todo) => {
        const list = store.getValue<string[]>(TODO_LIST_PATH) || [];
        store.setValue(TODO_LIST_PATH, [...list, todo.id]);
        store.setValue(todo.id, todo);
      },
      setTodo: (todo: Todo) => store.setValue(todo.id, todo),
      useTodo: (id: string) => store.useValue<Todo | undefined>(id, undefined),
      useTodoList: () => store.useValue<string[]>(TODO_LIST_PATH, []),
    }),
    [store],
  );

  return <TodoContext.Provider value={api}>{props.children}</TodoContext.Provider>;
}