Recoil vs Compose

recoil.js

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

const todoListState = atom({
  key: 'todoListState',
  default: [],
});

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

function Example() {
  // read atom
  const [text, setText] = useRecoilState(textState)
  text
  // write atom
  setText("foo")
  // read selector
  const filteredTodoList = useRecoilValue(filteredTodoListState)
}




// Atom
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

// selector
const charCountState = selector({
  key: 'charCountState', // unique ID (with respect to other atoms/selectors)
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

// Todo List
const todoListState = atom({
  key: 'todoListState',
  default: [],
});

function TodoList() {
  const todoList = useRecoilValue(todoListState);

  return (
    <>
      {/* <TodoListStats /> */}
      {/* <TodoListFilters /> */}
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem key={todoItem.id} item={todoItem} />
      ))}
    </>
  );
}

function TodoItemCreator() {
  const [inputValue, setInputValue] = useState('');
  const setTodoList = useSetRecoilState(todoListState);

  const addItem = () => {
    setTodoList((oldTodoList) => [
      ...oldTodoList,
      {
        id: getId(),
        text: inputValue,
        isComplete: false,
      },
    ]);
    setInputValue('');
  };

  const onChange = ({target: {value}}) => {
    setInputValue(value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={onChange} />
      <button onClick={addItem}>Add</button>
    </div>
  );
}

// utility for creating unique Id
let id = 0;
function getId() {
  return id++;
}

function TodoItem({item}) {
  const [todoList, setTodoList] = useRecoilState(todoListState);
  const index = todoList.findIndex((listItem) => listItem === item);

  const editItemText = ({target: {value}}) => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      text: value,
    });

    setTodoList(newList);
  };

  const toggleItemCompletion = () => {
    const newList = replaceItemAtIndex(todoList, index, {
      ...item,
      isComplete: !item.isComplete,
    });

    setTodoList(newList);
  };

  const deleteItem = () => {
    const newList = removeItemAtIndex(todoList, index);

    setTodoList(newList);
  };

  return (
    <div>
      <input type="text" value={item.text} onChange={editItemText} />
      <input
        type="checkbox"
        checked={item.isComplete}
        onChange={toggleItemCompletion}
      />
      <button onClick={deleteItem}>X</button>
    </div>
  );
}

function replaceItemAtIndex(arr, index, newValue) {
  return [...arr.slice(0, index), newValue, ...arr.slice(index + 1)];
}

function removeItemAtIndex(arr, index) {
  return [...arr.slice(0, index), ...arr.slice(index + 1)];
}

// selectors: ToDoList

const todoListFilterState = atom({
  key: 'todoListFilterState',
  default: 'Show All',
});

const filteredTodoListState = selector({
  key: 'filteredTodoListState',
  get: ({get}) => {
    const filter = get(todoListFilterState);
    const list = get(todoListState);

    switch (filter) {
      case 'Show Completed':
        return list.filter((item) => item.isComplete);
      case 'Show Uncompleted':
        return list.filter((item) => !item.isComplete);
      default:
        return list;
    }
  },
});

function TodoList() {
  // changed from todoListState to filteredTodoListState
  const todoList = useRecoilValue(filteredTodoListState);

  return (
    <>
      <TodoListStats />
      <TodoListFilters />
      <TodoItemCreator />

      {todoList.map((todoItem) => (
        <TodoItem item={todoItem} key={todoItem.id} />
      ))}
    </>
  );
}

function TodoListFilters() {
  const [filter, setFilter] = useRecoilState(todoListFilterState);

  const updateFilter = ({target: {value}}) => {
    setFilter(value);
  };

  return (
    <>
      Filter:
      <select value={filter} onChange={updateFilter}>
        <option value="Show All">All</option>
        <option value="Show Completed">Completed</option>
        <option value="Show Uncompleted">Uncompleted</option>
      </select>
    </>
  );
}

const todoListStatsState = selector({
  key: 'todoListStatsState',
  get: ({get}) => {
    const todoList = get(filteredTodoListState);
    const totalNum = todoList.length;
    const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
    const totalUncompletedNum = totalNum - totalCompletedNum;
    const percentCompleted = totalNum === 0 ? 0 : totalCompletedNum / totalNum;

    return {
      totalNum,
      totalCompletedNum,
      totalUncompletedNum,
      percentCompleted,
    };
  },
});

function TodoListStats() {
  const {
    totalNum,
    totalCompletedNum,
    totalUncompletedNum,
    percentCompleted,
  } = useRecoilValue(todoListStatsState);

  const formattedPercentCompleted = Math.round(percentCompleted * 100);

  return (
    <ul>
      <li>Total items: {totalNum}</li>
      <li>Items completed: {totalCompletedNum}</li>
      <li>Items not completed: {totalUncompletedNum}</li>
      <li>Percent completed: {formattedPercentCompleted}</li>
    </ul>
  );
}

Recoil.kt

var text by mutableStateOf("")
val charCount: Int get() = text.length
val todoList = mutableStateListOf<Item>(emptyList())
val filteredTodoList get() = when (todoListFilter) {
  Filter.Completed -> todoList.filter { it.isComplete }
  Filter.Uncompleted -> todoList.filter { !it.isComplete }
  Filter.All -> todoList
}

@Composable fun Example() {
  // read atom
  text
  // write atom
  text = "foo"
  // read selector
  filteredTodoList
}


// Section 1: Atom
var text by mutableStateOf("")

@Composable fun CharacterCounter() {
  TextInput()
  CharacterCount()
}

@Composable fun TextInput() {
  TextField(value = text, onValueChange = { text = it })
  Text("Echo $text")
}

// Section 2: selector
val charCount: Int get() = text.length

@Composable fun CharacterCount() {
  Text("Character Count: $charCount")
}

// Section 3: Todo List Atom
data class Item(val id: Int, val text: String, val isComplete: Boolean)
val todoList = mutableStateListOf<Item>(emptyList())

@Composable fun TodoList() {
  /* <TodoListStats /> */
  /* <TodoListFilters /> */
  TodoItemCreator()

  todoList.forEach {
    key(it.id) { TodoItem(item=it) }
  }
}

@Composable fun TodoItemCreator() {
  var inputValue by remember { mutableStateOf("") }

  TextField(value=inputValue, onValueChange={ inputValue = it })
  Button(text="Add") {
    todoList += Item(
      id = getId(),
      text = inputValue,
      isComplete = false
    )
    inputValue = ""
  }
}

// utility for creating unique Id
var id = 0;
fun getId() = id++

@Composable fun TodoItem(item) {
  val index = todoList.indexOf { it == item }

  TextField(value=item.text, onValueChange={
    todoList[index] = item.copy(text = it)
  })
  Checkbox(value=item.isComplete, onValueChange={
    todoList[index] = item.copy(isComplete = !item.isComplete)
  })
  Button(text="X") {
    todoList.removeAt(index)
  }
}

// Section 4: ToDo List Selectors

enum class Filter { All, Completed, Uncompleted }

var todoListFilter by mutableStateOf(Filter.All)

val filteredTodoList get() = when (todoListFilter) {
  Filter.Completed -> todoList.filter { it.isComplete }
  Filter.Uncompleted -> todoList.filter { !it.isComplete }
  Filter.All -> todoList
}

@Composable fun TodoList() {
  TodoListStats()
  TodoListFilters()
  TodoItemCreator()

  filteredTodoList.forEach {
    key(it.id) { TodoItem(item=it) }
  }
}

@Composable fun TodoListFilters() {
  Text("Filter:")
  Select(
    options=Filter.values(),
    value=todoListFilter, 
    onChange={ todoListFilter = it }
  ) {
    when (it) {
      Filter.Completed -> Text("Completed")
      Filter.Uncompleted -> Text("Uncompleted")
      Filter.All -> Text("All")
    }
  }
}

@Composable fun TodoListStats() {
  val totalNum = filteredTodoList.length
  val totalCompletedNum = filteredTodoList.count { it.isComplete }
  val totalUncompletedNum = totalNum - totalCompletedNum
  val percentCompleted = if (totalNum == 0) 0 else totalCompletedNum / totalNum
  val formattedPercentCompleted = round(percentCompleted * 100)

  Column {
      Text("Total items: $totalNum")
      Text("Items completed: $totalCompletedNum")
      Text("Items not completed: $totalUncompletedNum")
      Text("Percent completed: $formattedPercentCompleted")
  }
}