useCallback Hook: Optimizing Function References

Understanding useCallback

1. The Problem: Function Identity

// The Problem: Functions are recreated on every render
function ParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // This function is recreated on every render!
  const handleClick = () => {
    console.log('Button clicked!');
  };
  
  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="Type here..."
      />
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      
      {/* ExpensiveChild re-renders whenever ParentComponent re-renders
          because handleClick is a new function each time */}
      <ExpensiveChild onClick={handleClick} />
    </div>
  );
}

// Even with React.memo, this component re-renders unnecessarily
const ExpensiveChild = React.memo(function ExpensiveChild({ onClick }) {
  console.log('ExpensiveChild rendered');
  
  // Simulate expensive operation
  const startTime = performance.now();
  while (performance.now() - startTime < 100) {
    // Artificial delay
  }
  
  return (
    <div className="expensive-child">
      <button onClick={onClick}>
        Click me (Expensive to render)
      </button>
    </div>
  );
});

// The Solution: useCallback
function OptimizedParentComponent() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // This function is memoized and only recreated when dependencies change
  const handleClick = useCallback(() => {
    console.log('Button clicked!');
  }, []); // Empty dependency array = function never changes
  
  return (
    <div>
      <input 
        value={text} 
        onChange={(e) => setText(e.target.value)} 
        placeholder="Type here..."
      />
      <div>Count: {count}</div>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
      
      {/* ExpensiveChild only re-renders when handleClick changes
          (which is never in this case) */}
      <ExpensiveChild onClick={handleClick} />
    </div>
  );
}

2. useCallback with Dependencies

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [selectedId, setSelectedId] = useState(null);
  
  // Bad: Function recreated on every render (including when selectedId changes)
  const badHandleSearch = () => {
    fetchResults(query).then(setResults);
  };
  
  // Better: Only recreated when query changes
  const handleSearch = useCallback(() => {
    fetchResults(query).then(setResults);
  }, [query]);
  
  // Function that depends on state
  const handleSelect = useCallback((id) => {
    setSelectedId(id);
    // Imagine we need to do something with the current query
    console.log(`Selected ${id} while searching for "${query}"`);
  }, [query]); // Recreated when query changes
  
  // Function that doesn't depend on external values
  const handleClear = useCallback(() => {
    setQuery('');
    setResults([]);
    setSelectedId(null);
  }, []); // Never recreated
  
  return (
    <div>
      <SearchInput
        value={query}
        onChange={setQuery}
        onSearch={handleSearch}
        onClear={handleClear}
      />
      <SearchResults
        results={results}
        selectedId={selectedId}
        onSelect={handleSelect}
      />
    </div>
  );
}

3. Common useCallback Patterns

// Pattern 1: Event Handlers
function FormComponent() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  
  // Memoized change handler
  const handleChange = useCallback((field) => (event) => {
    setFormData(prev => ({
      ...prev,
      [field]: event.target.value
    }));
  }, []);
  
  // Memoized submit handler
  const handleSubmit = useCallback(async (event) => {
    event.preventDefault();
    try {
      await submitForm(formData);
      // Reset form or show success message
    } catch (error) {
      // Handle error
    }
  }, [formData]);
  
  return (
    <form onSubmit={handleSubmit}>
      <FormField
        label="Name"
        value={formData.name}
        onChange={handleChange('name')}
      />
      <FormField
        label="Email"
        value={formData.email}
        onChange={handleChange('email')}
      />
      <FormField
        label="Message"
        value={formData.message}
        onChange={handleChange('message')}
        multiline
      />
      <button type="submit">Send</button>
    </form>
  );
}

// Pattern 2: API Calls
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  
  // Memoized fetch function
  const fetchUsers = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await api.getUsers();
      setUsers(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, []); // No dependencies, API call doesn't depend on component state
  
  // Memoized delete handler
  const handleDelete = useCallback(async (userId) => {
    try {
      await api.deleteUser(userId);
      // Remove user from local state
      setUsers(prevUsers => prevUsers.filter(user => user.id !== userId));
    } catch (err) {
      setError(err.message);
    }
  }, []); // No dependencies needed
  
  // Fetch users on mount
  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);
  
  return (
    <div>
      {loading && <Spinner />}
      {error && <ErrorMessage message={error} />}
      <UserListDisplay
        users={users}
        onDelete={handleDelete}
        onRefresh={fetchUsers}
      />
    </div>
  );
}

// Pattern 3: Debounced Functions
function SearchableList({ items }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredItems, setFilteredItems] = useState(items);
  
  // Create debounced search function
  const debouncedSearch = useCallback(
    debounce((term) => {
      const filtered = items.filter(item =>
        item.name.toLowerCase().includes(term.toLowerCase())
      );
      setFilteredItems(filtered);
    }, 300),
    [items] // Recreate when items change
  );
  
  // Handle search input change
  const handleSearchChange = useCallback((event) => {
    const value = event.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  }, [debouncedSearch]);
  
  return (
    <div>
      <SearchInput
        value={searchTerm}
        onChange={handleSearchChange}
        placeholder="Search items..."
      />
      <ItemList items={filteredItems} />
    </div>
  );
}