DEV Community

Cover image for How to use react-tracked: React hooks-oriented Todo List example
Daishi Kato
Daishi Kato

Posted on • Originally published at blog.axlight.com

How to use react-tracked: React hooks-oriented Todo List example

With immer

Introduction

React hooks have changed the way to compose components. This post will show an example which is very hooks-oriented.

We use two libraries: react-tracked and immer. While immer makes it easy to update state in an immutable way, react-tracked makes it easy to read state with tracking for optimization. Please check out the repo for more details.

https://github.com/dai-shi/react-tracked

The example we show is the one from Redux: Todo List

Folder structure

- src/
  - index.tsx
  - state.ts
  - hooks/
    - useAddTodo.ts
    - useToggleTodo.ts
    - useVisibilityFilter.ts
    - useVisibleTodos.ts
  - components/
    - AddTodo.tsx
    - App.tsx
    - FilterLink.tsx
    - Footer.tsx
    - Todo.tsx
    - VisibleTodoList.tsx
Enter fullscreen mode Exit fullscreen mode

We have two folders components and hooks. Components are basically views. Hooks include logic.

src/state.ts

In this example, we don't use reducers. We define a state only and some types.

import { useState } from 'react';

export type VisibilityFilterType =
  | 'SHOW_ALL'
  | 'SHOW_COMPLETED'
  | 'SHOW_ACTIVE';

export type TodoType = {
  id: number;
  text: string;
  completed: boolean;
};

export type State = {
  todos: TodoType[];
  visibilityFilter: VisibilityFilterType;
};

const initialState: State = {
  todos: [],
  visibilityFilter: 'SHOW_ALL',
};

export const useValue = () => useState(initialState);

export type SetState = ReturnType<typeof useValue>[1];
Enter fullscreen mode Exit fullscreen mode

Notice the last line. It might be a bit tricky.
SetState is a type for setState.

src/hooks/useAddTodo.ts

import { useCallback } from 'react';
import { useDispatch } from 'react-tracked';
import produce from 'immer';

import { SetState } from '../state';

let nextTodoId = 0;

const useAddTodo = () => {
  const setState = useDispatch<SetState>();
  const addTodo = useCallback((text: string) => {
    setState(s => produce(s, (draft) => {
      draft.todos.push({
        id: nextTodoId++,
        text,
        completed: false,
      });
    }));
  }, [setState]);
  return addTodo;
};

export default useAddTodo;
Enter fullscreen mode Exit fullscreen mode

This is the hook responsible for adding an item. We use immer here, but it's not necessary.

src/hooks/useToggleTodo.ts

import { useCallback } from 'react';
import { useDispatch } from 'react-tracked';
import produce from 'immer';

import { SetState } from '../state';

const useToggleTodo = () => {
  const setState = useDispatch<SetState>();
  const toggleTodo = useCallback((id: number) => {
    setState(s => produce(s, (draft) => {
      const found = draft.todos.find(todo => todo.id === id);
      if (found) {
        found.completed = !found.completed;
      }
    }));
  }, [setState]);
  return toggleTodo;
};

export default useToggleTodo;
Enter fullscreen mode Exit fullscreen mode

Same idea of this hook to toggle an item.

src/hooks/useVisibilityFilter.ts

import { useCallback } from 'react';
import { useTracked } from 'react-tracked';
import produce from 'immer';

import { VisibilityFilterType, State, SetState } from '../state';

const useVisibilityFilter = () => {
  const [state, setState] = useTracked<State, SetState>();
  const setVisibilityFilter = useCallback((filter: VisibilityFilterType) => {
    setState(s => produce(s, (draft) => {
      draft.visibilityFilter = filter;
    }));
  }, [setState]);
  return [state.visibilityFilter, setVisibilityFilter] as [
    VisibilityFilterType,
    typeof setVisibilityFilter,
  ];
};

export default useVisibilityFilter;
Enter fullscreen mode Exit fullscreen mode

This hook is for both returning the current visibilityFilter and a setter function. We use useTracked for this. It is a combined hook to combine useTrackedState and useDispatch.

src/hooks/useVisibleTodos.ts

import { useTrackedState } from 'react-tracked';

import { TodoType, VisibilityFilterType, State } from '../state';

const getVisibleTodos = (todos: TodoType[], filter: VisibilityFilterType) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    default:
      throw new Error(`Unknown filter: ${filter}`);
  }
};

const useVisibleTodos = () => {
  const state = useTrackedState<State>();
  return getVisibleTodos(state.todos, state.visibilityFilter);
};

export default useVisibleTodos;
Enter fullscreen mode Exit fullscreen mode

This hook handles filtering of Todo items.

src/components/AddTodo.tsx

import * as React from 'react';
import { useState } from 'react';

import useAddTodo from '../hooks/useAddTodo';

const AddTodo: React.FC = () => {
  const [text, setText] = useState('');
  const addTodo = useAddTodo();
  return (
    <div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!text.trim()) {
            return;
          }
          addTodo(text);
          setText('');
        }}
      >
        <input value={text} onChange={e => setText(e.target.value)} />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
};

export default AddTodo;
Enter fullscreen mode Exit fullscreen mode

There's nothing special to note except for useAddTodo being imported from the hooks folder.

src/components/Todo.tsx

import * as React from 'react';

type Props = {
  onClick: (e: React.MouseEvent) => void;
  completed: boolean;
  text: string;
};

const Todo: React.FC<Props> = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    role="presentation"
    style={{
      textDecoration: completed ? 'line-through' : 'none',
      cursor: 'pointer',
    }}
  >
    {text}
  </li>
);

export default Todo;
Enter fullscreen mode Exit fullscreen mode

This is a componet with no hooks dependency.

src/components/VisibleTodoList.tsx

import * as React from 'react';

import useVisibleTodos from '../hooks/useVisibleTodos';
import useToggleTodo from '../hooks/useToggleTodo';
import Todo from './Todo';

const VisibleTodoList: React.FC = () => {
  const visibleTodos = useVisibleTodos();
  const toggleTodo = useToggleTodo();
  return (
    <ul>
      {visibleTodos.map(todo => (
        <Todo key={todo.id} {...todo} onClick={() => toggleTodo(todo.id)} />
      ))}
    </ul>
  );
};

export default VisibleTodoList;
Enter fullscreen mode Exit fullscreen mode

This is different from the original example. We moved the filtering logic to hooks.

src/components/FilterLink.tsx

import * as React from 'react';

import useVisibilityFilter from '../hooks/useVisibilityFilter';
import { VisibilityFilterType } from '../state';

type Props = {
  filter: VisibilityFilterType;
};

const FilterLink: React.FC<Props> = ({ filter, children }) => {
  const [visibilityFilter, setVisibilityFilter] = useVisibilityFilter();
  const active = filter === visibilityFilter;
  return (
    <button
      type="button"
      onClick={() => setVisibilityFilter(filter)}
      disabled={active}
      style={{
        marginLeft: '4px',
      }}
    >
      {children}
    </button>
  );
};

export default FilterLink;
Enter fullscreen mode Exit fullscreen mode

This uses the useVisibilityFilter hook. Notice the hook returns a tuple, a value and a setter function.

src/components/Footer.tsx

import * as React from 'react';

import FilterLink from './FilterLink';

const Footer: React.FC = () => (
  <div>
    <span>Show: </span>
    <FilterLink filter="SHOW_ALL">All</FilterLink>
    <FilterLink filter="SHOW_ACTIVE">Active</FilterLink>
    <FilterLink filter="SHOW_COMPLETED">Completed</FilterLink>
  </div>
);

export default Footer;
Enter fullscreen mode Exit fullscreen mode

Nothing special to note for this component.

src/components/App.tsx

import * as React from 'react';

import Footer from './Footer';
import AddTodo from './AddTodo';
import VisibleTodoList from './VisibleTodoList';

const App: React.FC = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
);

export default App;
Enter fullscreen mode Exit fullscreen mode

This is the component to compose other components all together.

src/index.tsx

Finally, we need the entry point.

import * as React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-tracked';

import { useValue } from './state';
import App from './components/App';

const Index = () => (
  <Provider useValue={useValue}>
    <App />
  </Provider>
);

render(React.createElement(App), document.getElementById('app'));
Enter fullscreen mode Exit fullscreen mode

Notice the <Provider> passes the useValue from state.ts.

Online demo

codesandbox

Source code in the repo

Closing notes

As I wrote this post, I noticed something. My original motivation is to show how to use react-tracked. However, this example is also good to show how setState and custom hooks can separate concerns without reducers. The other minor finding for me is that immer doesn't help much in custom hooks in this example.

We didn't discuss much about performance optimization. There's some room for improvement. One of the easiest ones is to use React.memo. Optimization could be a separate topic for future posts.


Originally published at https://blog.axlight.com on July 8, 2019.

Top comments (0)