Mastering React Rendering: How memo and useCallback Eliminate Unnecessary Re-renders

// Parent Component - WITHOUT memo/useCallback
function Todo() {
  const [newTodo, setNewTodo] = React.useState("");
  const [todos, setTodos] = React.useState([]);

  // ❌ These functions get recreated on EVERY render
  const handleInputChange = (e) => setNewTodo(e.target.value);
  const handleAddTodo = () => {
    // add todo logic
  };

  console.log("Parent renders"); // Logs constantly!

  return (
    <>
      <TodoInput 
        newTodo={newTodo}
        handleInputChange={handleInputChange}
        handleAddTodo={handleAddTodo}
      />
      <TodoList todos={todos} /* other handlers */ />
    </>
  );
}

// Child components - even with memo, they re-render!
const TodoInput = React.memo(({ newTodo, handleInputChange }) => {
  console.log("TodoInput re-rendered!"); // Still logs!
  return <input value={newTodo} onChange={handleInputChange} />;
});

import React, { useCallback, useState, useEffect } from "react";
import TodoInput from "./TodoInput";
import TodoList from "./TodoList";

export default function Todo() {
  const [newTodo, setNewTodo] = useState("");
  const [todos, setTodos] = useState(
    JSON.parse(localStorage.getItem("todos")) || []
  );

  // ✅ useCallback prevents function recreation
  const handleInputChange = useCallback((e) => {
    setNewTodo(e.target.value);
  }, []);

  const handleAddTodo = useCallback(() => {
    if (newTodo.trim() !== "") {
      const newTodoItem = {
        id: Date.now(),
        text: newTodo,
        completed: false,
        edit: false,
      };
      setTodos((prevTodos) => [...prevTodos, newTodoItem]);
      setNewTodo("");
    }
  }, [newTodo]);

  const handleEdit = useCallback((id) => {
    setTodos((prevTodos) =>
      prevTodos.map((todo) =>
        todo.id === id ? { ...todo, edit: !todo.edit } : todo
      )
    );
  }, []);

  const handleDelete = useCallback((id) => {
    setTodos((prevState) => prevState.filter((todo) => todo.id !== id));
  }, []);

  const handleComplete = useCallback((id) => {
    setTodos((prevState) =>
      prevState.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }, []);

  const handleEditedTodo = useCallback((e, id) => {
    setTodos((prevState) =>
      prevState.map((todo) =>
        todo.id === id ? { ...todo, text: e.target.value } : todo
      )
    );
  }, []);

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));
  }, [todos]);

  console.log("Parent"); // Only logs when todos change

  return (
    <div className="container">
      <h1 className="heading">Todo Component</h1>
      <div className="flex flex-col mt-4 mx-auto p-4 border rounded min-w-[650px] min-h-[600px]">
        <TodoInput
          newTodo={newTodo}
          handleInputChange={handleInputChange}
          handleKeyDown={handleAddTodo} // Stable reference
          handleAddTodo={handleAddTodo}
        />
        <TodoList
          todos={todos}
          handleEdit={handleEdit}
          handleDelete={handleDelete}
          handleComplete={handleComplete}
          handleEditedTodo={handleEditedTodo}
        />
      </div>
    </div>
  );
}

// TodoInput.jsx - ✅ memoized
import React, { memo } from "react";

export default memo(function TodoInput({
  newTodo,
  handleInputChange,
  handleKeyDown,
  handleAddTodo,
}) {
  console.log("TodoInput"); // Only logs when newTodo changes
  return (
    <div className="flex border-gray-300 border-b pb-3">
      <input
        type="text"
        className="border border-gray-300 rounded-lg p-2 flex-grow mr-2"
        placeholder="Add a new todo"
        value={newTodo}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
      />
      <button
        onClick={handleAddTodo}
        className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 cursor-pointer"
      >
        Add
      </button>
    </div>
  );
});