implement last suggestions

src/App.tsx

@@ -14,11 +14,13 @@ export const App: React.FC = () => {
     setFilterParam(param);
   };
 
+  const souldRenderList = Boolean(state.length);
+
   return (
     <div className="todoapp">
       <Header />
 
-      {state.length > 0
+      {souldRenderList
         && (
           <>
             <section className="main">

src/components/TodoItem/TodoItem.tsx

@@ -16,7 +16,6 @@ interface Props {
 }
 
 export const TodoItem: React.FC<Props> = ({ todo, toggleStatus }) => {
-  // const state = useContext(TodosContext);
   const { dispatch } = useContext(TodosContext);
   const [titleCurrent, setTitleCurrent] = useState('');
   const [updatedTitle, setUpdatedTitle] = useState('');
@@ -71,6 +70,7 @@ export const TodoItem: React.FC<Props> = ({ todo, toggleStatus }) => {
     setTitleCurrent(title);
     setUpdatedTitle(title);
     setStatus(completed);
+
     if (completed && checkbox.current) {
       checkbox.current.checked = true;
     }

src/components/TodosFilter/TodosFilter.tsx

@@ -26,6 +26,10 @@ export const TodoFilter: React.FC<Props> = ({
   const { state } = useContext(TodosContext);
   const { dispatch } = useContext(TodosContext);
 
+  const handleDeleteComplited = () => {
+    dispatch({ type: Dispatchers.DeleteComplited });
+  };
+
   const count = state.filter(todo => !todo.completed).length;
 
   const shouldClearButtonRender = shouldRenderButton(count, state.length);
@@ -77,7 +81,7 @@ export const TodoFilter: React.FC<Props> = ({
           className={cn(
             'clear-completed',
           )}
-          onClick={() => dispatch({ type: Dispatchers.DeleteComplited })}
+          onClick={handleDeleteComplited}
         >
           Clear completed
         </button>

src/hooks/useLocalStorage.tsx

@@ -26,5 +26,4 @@ export function useLocalStorage<T>(
   };
 
   return { value, save };
-  // return [value, save];
 }

src/store/store.tsx

@@ -19,43 +19,43 @@ const reducer = (state: Todo[], action: Actions) => {
       ];
 
     case Dispatchers.DeleteComplited:
-      return [...state].filter(elem => !elem.completed);
+      return [...state].filter(todo => !todo.completed);
 
     case Dispatchers.DeleteWithId:
-      return [...state].filter(elem => elem.id !== action.payload);
+      return [...state].filter(todo => todo.id !== action.payload);
 
     case Dispatchers.ChangeStatus: {
-      return [...state].map(elem => {
-        if (elem.id === action.payload) {
+      return [...state].map(todo => {
+        if (todo.id === action.payload) {
           return {
-            ...elem,
-            completed: !elem.completed,
+            ...todo,
+            completed: !todo.completed,
           };
         }
 
-        return elem;
+        return todo;
       });
     }
 
     case Dispatchers.UpdateTitle: {
       const { title, id } = action.payload;
 
-      return [...state].map(elem => {
-        if (elem.id === id) {
+      return [...state].map(todo => {
+        if (todo.id === id) {
           return {
-            ...elem,
+            ...todo,
             title,
           };
         }
 
-        return elem;
+        return todo;
       });
     }
 
     case Dispatchers.ChangeAllStatuses: {
-      return [...state].map(elem => {
+      return [...state].map(todo => {
         return {
-          ...elem,
+          ...todo,
           completed: action.payload,
         };
       });