perf: separate state and state setters in TodoContext

src/components/Footer/Footer.tsx

@@ -1,6 +1,9 @@
 import { useMemo } from 'react';
 import { Filter } from '../../types/Filter';
-import { useTodoContext } from '../context/TodoContext';
+import {
+  useTodoContextState,
+  useTodoContextUpdater,
+} from '../context/TodoContext';
 
 const FILTERS: Record<Filter, string> = {
   All: '#/',
@@ -9,7 +12,8 @@ const FILTERS: Record<Filter, string> = {
 };
 
 export const Footer = () => {
-  const { todos, filter, setFilter, deleteMultipleTodos } = useTodoContext();
+  const { todos, filter } = useTodoContextState();
+  const { setFilter, deleteMultipleTodos } = useTodoContextUpdater();
 
   const incompleteTodosCount = useMemo(() => {
     return todos.filter(todo => !todo.completed).length;

src/components/Header/Header.tsx

@@ -1,10 +1,13 @@
 import { useState } from 'react';
-import { useTodoContext } from '../context/TodoContext';
+import {
+  useTodoContextState,
+  useTodoContextUpdater,
+} from '../context/TodoContext';
 
 export const Header = () => {
   const [todoTitle, setTodoTitle] = useState('');
-  const { addTodo, headerInputRef, todos, toggleMultipleTodosStatus } =
-    useTodoContext();
+  const { headerInputRef, todos } = useTodoContextState();
+  const { addTodo, toggleMultipleTodosStatus } = useTodoContextUpdater();
 
   const handleSubmit = (event: React.FormEvent) => {
     event.preventDefault();

src/components/TodoItem/TodoItem.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Todo } from '../../types/Todo';
-import { useTodoContext } from '../context/TodoContext';
+import { useTodoContextUpdater } from '../context/TodoContext';
 
 type Props = {
   todo: Todo;
@@ -12,7 +12,8 @@ export const TodoItem = ({ todo: { id, title, completed } }: Props) => {
   const renameInputRef = useRef<HTMLInputElement | null>(null);
   const checkboxRef = useRef<HTMLInputElement | null>(null);
 
-  const { toggleTodoStatus, updateTodoTitle, deleteTodo } = useTodoContext();
+  const { toggleTodoStatus, updateTodoTitle, deleteTodo } =
+    useTodoContextUpdater();
 
   const handleSubmit = useCallback(
     (event: React.FormEvent) => {

src/components/Todos/Todos.tsx

@@ -1,8 +1,8 @@
-import { useTodoContext } from '../context/TodoContext';
+import { useTodoContextState } from '../context/TodoContext';
 import { TodoItem } from '../TodoItem/TodoItem';
 
 export const Todos = () => {
-  const { filteredTodos } = useTodoContext();
+  const { filteredTodos } = useTodoContextState();
 
   return (
     <section className="todoapp__main" data-cy="TodoList">

src/components/context/TodoContext.tsx

@@ -10,27 +10,46 @@ import {
 import { Todo } from '../../types/Todo';
 import { Filter } from '../../types/Filter';
 
-type TodoContextProps = {
+type TodoContextStateProps = {
   todos: Todo[];
+  headerInputRef: React.RefObject<HTMLInputElement>;
+  filter: Filter;
+  filteredTodos: Todo[];
+};
+
+type TodoContextUpdaterProps = {
   addTodo: (title: string) => void;
   toggleTodoStatus: (id: number) => void;
   toggleMultipleTodosStatus: () => void;
   updateTodoTitle: (id: number, title: string) => void;
   deleteTodo: (id: number) => void;
-  headerInputRef: React.RefObject<HTMLInputElement>;
-  filter: Filter;
   setFilter: (filter: Filter) => void;
   deleteMultipleTodos: () => void;
-  filteredTodos: Todo[];
 };
 
-const TodoContext = createContext<TodoContextProps | undefined>(undefined);
+const TodoContextState = createContext<TodoContextStateProps | undefined>(
+  undefined,
+);
+
+const TodoContextUpdater = createContext<TodoContextUpdaterProps | undefined>(
+  undefined,
+);
+
+export const useTodoContextState = () => {
+  const context = useContext(TodoContextState);
+
+  if (!context) {
+    throw new Error('useTodoContextState must be used within a TodoProvider');
+  }
+
+  return context;
+};
 
-export const useTodoContext = () => {
-  const context = useContext(TodoContext);
+export const useTodoContextUpdater = () => {
+  const context = useContext(TodoContextUpdater);
 
   if (!context) {
-    throw new Error('useTodoContext must be used within a TodoProvider');
+    throw new Error('useTodoContextUpdater must be used within a TodoProvider');
   }
 
   return context;
@@ -116,32 +135,41 @@ export const TodoProvider = ({ children }: TodoProviderProps) => {
     setTodos(prevTodos => prevTodos.filter(todo => !todo.completed));
   }, []);
 
-  const value = useMemo(
+  const stateValue = useMemo(
     () => ({
       todos,
+      headerInputRef,
+      filter,
+      filteredTodos,
+    }),
+    [filter, filteredTodos, todos],
+  );
+
+  const updaterValue = useMemo(
+    () => ({
       addTodo,
       toggleTodoStatus,
       toggleMultipleTodosStatus,
       updateTodoTitle,
       deleteTodo,
-      headerInputRef,
-      filter,
       setFilter,
-      filteredTodos,
       deleteMultipleTodos,
     }),
     [
       addTodo,
       deleteMultipleTodos,
       deleteTodo,
-      filter,
-      filteredTodos,
-      todos,
       toggleMultipleTodosStatus,
       toggleTodoStatus,
       updateTodoTitle,
     ],
   );
 
-  return <TodoContext.Provider value={value}>{children}</TodoContext.Provider>;
+  return (
+    <TodoContextState.Provider value={stateValue}>
+      <TodoContextUpdater.Provider value={updaterValue}>
+        {children}
+      </TodoContextUpdater.Provider>
+    </TodoContextState.Provider>
+  );
 };