draft 2

src/components/Header/Header.tsx

@@ -4,7 +4,6 @@ import cn from 'classnames';
 import { useDispatch, useGlobalState } from '../../context/Store';
 
 export const Header: FC = () => {
-  const titleField = useRef<HTMLInputElement>(null);
   const [title, setTitle] = useState('');
   const [isSubmitting, setIsSubmiting] = useState(false);
 
@@ -43,6 +42,8 @@ export const Header: FC = () => {
     }
   };
 
+  const titleField = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     titleField.current?.focus();
   }, [todos, isSubmitting]);

src/components/TodoItem/TodoItem.tsx

@@ -16,8 +16,6 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [editedTitle, setEditedTitle] = useState(title);
 
-  const editField = useRef<HTMLInputElement>(null);
-
   const handleDelete = () => dispatch({ type: 'delete', payload: id });
 
   const handleSubmit = (
@@ -71,9 +69,11 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
     });
   };
 
+  const editField = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
-    if (editField.current && isEditing) {
-      editField.current.focus();
+    if (isEditing) {
+      editField.current?.focus();
     }
   }, [isEditing]);
 

src/context/Store.tsx

@@ -1,4 +1,11 @@
-import { createContext, FC, ReactNode, useContext, useReducer } from 'react';
+import {
+  createContext,
+  Dispatch,
+  FC,
+  ReactNode,
+  useContext,
+  useReducer,
+} from 'react';
 import { Todo } from '../types/Todo';
 import { getLocalStorage } from '../utils/getLocalStorageData';
 
@@ -7,8 +14,6 @@ type Action =
   | { type: 'update'; payload: Todo }
   | { type: 'delete'; payload: number };
 
-type Dispatch = { (action: Action): void };
-
 function reducer(todos: Todo[], action: Action) {
   let newTodos: Todo[] = [];
 
@@ -45,8 +50,10 @@ function reducer(todos: Todo[], action: Action) {
 
 const initialTodos: Todo[] = getLocalStorage<Todo[]>('todos', []);
 
+const defaultDispatch: Dispatch<Action> = () => {};
+
 export const TodosContext = createContext(initialTodos);
-export const DispatchContext = createContext<Dispatch>(() => {});
+export const DispatchContext = createContext(defaultDispatch);
 
 type Props = {
   children: ReactNode;
@@ -55,9 +62,11 @@ type Props = {
 export const GlobalStateProvider: FC<Props> = ({ children }) => {
   const [todos, dispatch] = useReducer(reducer, initialTodos);
 
-  <DispatchContext.Provider value={dispatch}>
-    <TodosContext.Provider value={todos}>{children}</TodosContext.Provider>
-  </DispatchContext.Provider>;
+  return (
+    <DispatchContext.Provider value={dispatch}>
+      <TodosContext.Provider value={todos}>{children}</TodosContext.Provider>
+    </DispatchContext.Provider>
+  );
 };
 
 export const useGlobalState = () => useContext(TodosContext);