fix: error hook, clear timeout, disable linter warn for some deps

src/App.tsx

@@ -8,10 +8,10 @@ import {
   updateTodo,
 } from './api/todos';
 import { FilterOption, Todo, Error } from './types';
+import { useError } from './hooks';
 
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [error, setError] = useState<Error>(Error.DEFAULT);
   const [filterOption, setFilterOption] = useState<FilterOption>(
     FilterOption.all,
   );
@@ -21,21 +21,14 @@ export const App: React.FC = () => {
   const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([]);
   const [editingTodoId, setEditingTodoId] = useState<number | null>(null);
   const [focusHeader, setFocusHeader] = useState(true);
+  const { error, handleError, handleResetError } = useError();
 
   const todosAmount = useMemo(() => todos.length, [todos]);
   const uncompletedTodosAmount = useMemo(
     () => todos.reduce((amount, todo) => amount + (todo.completed ? 0 : 1), 0),
     [todos],
   );
 
-  const handleResetError = () => setError(Error.DEFAULT);
-
-  const handleError = (message: Error) => {
-    setError(message);
-
-    setTimeout(handleResetError, 3000);
-  };
-
   const handleSubmitTodo = (title: string) => {
     if (!title) {
       handleError(Error.EMPTY_TITLE);
@@ -170,6 +163,7 @@ export const App: React.FC = () => {
       .catch(() => {
         handleError(Error.LOADING_TODOS);
       });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

src/components/TodoItem/TodoItem.tsx

@@ -56,6 +56,7 @@ export const TodoItem: React.FC<Props> = ({
     return () => {
       document.removeEventListener('keyup', handleReverseUpdate);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEditing]);
 
   return (

src/hooks/index.ts

@@ -0,0 +1 @@
+export { useError } from './useError';

src/hooks/useError.ts

@@ -0,0 +1,20 @@
+import { useRef, useState } from 'react';
+import { Error } from '../types';
+
+export const useError = () => {
+  const [error, setError] = useState<Error>(Error.DEFAULT);
+
+  const errorTimeoutId = useRef<NodeJS.Timeout>();
+
+  const handleResetError = () => setError(Error.DEFAULT);
+
+  const handleError = (message: Error) => {
+    setError(message);
+
+    clearTimeout(errorTimeoutId.current);
+
+    errorTimeoutId.current = setTimeout(handleResetError, 3000);
+  };
+
+  return { error, handleError, handleResetError };
+};