How To Filter Todo Items? React & Vite

Photo by Devin Avery on Unsplash

“How to filter todo items? Vue 3 Composition API” is the most popular article on my blog on Medium. It was published on April 10, 2022, and since then, it has received 12.8K views and 6.6K reads. That’s pretty impressive, especially considering that it wasn’t a real tutorial on how to build a todo app in Vue. The main reason I wrote that article was my desire to try how the Composition API works and explain it to myself. I am happy that my readers also found it helpful.

A few months later, in August 2022, I changed my job and joined a project just after its migration to Vue 3, which also meant tons of refactoring to the new setup syntax. The Composition API is something I learned and loved. So, you’re probably wondering why on earth you are reading my new article with ‘React’ in its title. I can completely understand your questioning and—if you are a passionate Vue developer—disappointment. The short answer: no, I am not going to change my favourite framework anytime soon, but I want to grow as a software engineer.

A bit longer explanation: For the last couple of months, I’ve been struggling with frustration about my future, including my career in tech. I tried to reflect on it in my recent article “World on the Brink: Why Focus on My Tech Career?” Despite feeling lost, I joined a BE Mentoring Program to assist Ukrainian women in launching IT careers. For eight weeks, I worked with five women whose strength and perseverance to overcome obstacles and move towards their goals were incredibly inspiring. I know it was supposed to be my role to motivate them, but they really became a great motivation for me.

One of the mentees had a very good technical background, and after my presentation on Vue, she managed to learn the main concepts of the framework in just two weeks. That was awesome. Now, I want to do the same, but with React. To start with, I decided to build exactly the same todo app and see what happens. First, I updated my Vue app with the setup syntax and moved it from StackBlitz to GitHub. For my brand-new React app, I used Vite as a build tool instead of the official Create React App, and it worked just fine. If you’re curious about my first impressions after trying React, here they are.

HTML-like Markup Inside a JavaScript File

I am not going to be original here: JSX felt like a bad dream. I am used to writing markup in a separate section, where it looks clean, simple, and understandable. So, creating my first React component as a function that returns some piece of HTML was quite challenging and a bit frustrating. They say rendering logic and markup living together in the same place ensures they stay in sync with each other on every edit. Sounds reasonable, but check how my code for a todo list differs in Vue and React, and choose your fighter:

<ul v-if="getTodos.length" class="todo-list">
  <li
    v-for="(todo, index) in getTodos"
    :key="index"
    class="todo-item"
    :class="{ done: todo.done }"
  >
   <span class="task" @click="doneTodo(todo)">{{ todo.content }}</span>
   <span class="label">{{ todo.type }}</span>
   <button class="remove-btn" @click="removeTodo(todo.id)" />
  </li>
</ul>

Versus:

const todoItemsList = filteredTodos.map((todo) => (
  <li key={todo.id} className={`todo-item ${todo.done ? "done" : ""}`}>
    <span className='task' onClick={() => toggleDone(todo.id)}>
      {todo.content}
    </span>
    <span className='label'>{todo.type}</span>
    <button
      className='remove-btn'
      onClick={() => removeTodo(todo.id)}
     ></button>
   </li>
));

React Hooks: useState, useEffect, useMemo

At first glance, useState and its syntax seemed alien compared to the good old ref. ref is a function that returns an object with the value property, which holds the actual reactive data. useState is a function that takes one argument, the initial state, and returns an array with two values: the initial state and a function used to change the state. Wait a second, you have a variable that can't be changed, and then a function whose sole purpose is to change that variable? Exactly!

You can read why it was designed like that in this article [1], but the short answer is: Vue and React deal with reactivity under the hood in different ways. Nevertheless, you can build your own useState Hook as a composable in Vue [2]. In the end, what matters is that both mechanisms can be used to accomplish the same functionality—ensuring that the UI always mirrors the current state and its updates. In my app, every time I wanted to modify my todo—add, toggle, or remove—I had to call setTodos inside all of the related functions.

const [todos, setTodos] = useState(() => {
  const savedTodos = localStorage.getItem("todos");
  return savedTodos ? JSON.parse(savedTodos) : defaultData;
});

// Example of usage
function toggleDone(id) {
  setTodos(
    todos.map((todo) =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    )
  );
}

Event Handling, Conditional and List Rendering

In Vue, there are directives (v-model, @click, @keyup.enter) that allow you to work with events in a declarative style. React uses attributes that resemble JavaScript event handlers (onChange, onKeyUp, onClick). I cannot believe I am writing this: Vue directives are easier to use, but React attributes are much easier to understand. A similar situation occurs with conditional and list rendering: in React, there are no special directives like v-if and v-for in Vue (I swear, I love them). Instead, it uses conditional operators in JSX (ternary operators, logical AND (&&)) and the map method for rendering lists. At first, it takes some effort to start thinking this way, but once you get used to it, there is no reason to overdramatise. It is just more like Vanilla JavaScript, after all.

Final Note

Here is the harsh truth: I built the simplest app one can imagine in React — a todo app — and it was tough. Given my solid background in Vue, instead of being helpful, it was a sort of obstacle for me. Sometimes, I felt more skeptical about React than I obviously should have been. I realise that this is just the tip of the iceberg I touched on in this article, and these are just my personal impressions and random thoughts. If you want to dive deeper into the topic, please check the links I refer to:

1. React Hooks API vs Vue Composition API, as explored through useState [Posted on 19 August 2020]
2. useState and useReducer with the Vue 3 Composition API [Posted on 18 October 2020]

Also, here are the GitHub links to my 💚 Vue and 🩵 React repositories. Please share your comments below. If you want me to write more on the topic, visit my Buy Me a Coffee page.

Final Final Note

I published my original article on the 46th day of Ukraine’s heroic resistance against Russian aggression. Back then, I never expected it to turn into 861 days of the full-scale war. I try not to think about how much we have suffered and lost. But we keep on fighting for our freedom and safety for all of Europe and beyond. Donate to the Ukrainian Armed Forces and #StayWithUkraine.