function SearchResults() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const previousQuery = usePrevious(query);

  useEffect(() => {
    if (query !== previousQuery && query.length > 0) {
      // Only search when query actually changed
      searchAPI(query).then(setResults);
    }
  }, [query, previousQuery]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      {previousQuery && <p>Previous search: {previousQuery}</p>}
      <div>{/* Render results */}</div>
    </div>
  );
}

interface UserProfileProps {
  userId: string;
  userName: string;
}

function UserProfile({ userId, userName }: UserProfileProps) {
  const previousUserId = usePrevious(userId);
  const previousUserName = usePrevious(userName);

  useEffect(() => {
    if (userId !== previousUserId) {
      // User changed, fetch new profile data
      fetchUserProfile(userId);
    }
  }, [userId, previousUserId]);

  useEffect(() => {
    if (userName !== previousUserName && previousUserName) {
      // Name updated, show notification
      showNotification(`Name changed from ${previousUserName} to ${userName}`);
    }
  }, [userName, previousUserName]);

  return <div>{/* Profile UI */}</div>;
}

function DataProcessor({ data, filters }) {
  const [processedData, setProcessedData] = useState([]);
  const previousData = usePrevious(data);
  const previousFilters = usePrevious(filters);

  useEffect(() => {
    const dataChanged = data !== previousData;
    const filtersChanged =
      JSON.stringify(filters) !== JSON.stringify(previousFilters);

    if (dataChanged || filtersChanged) {
      // Only process when actual changes occurred
      const processed = processData(data, filters);
      setProcessedData(processed);

      if (dataChanged) {
        console.log("Data updated");
      }
      if (filtersChanged) {
        console.log("Filters updated");
      }
    }
  }, [data, filters, previousData, previousFilters]);

  return <div>{/* Render processed data */}</div>;
}

function FormField({ value, onValidate }) {
  const [error, setError] = useState("");
  const previousValue = usePrevious(value);

  useEffect(() => {
    if (value !== previousValue && previousValue !== undefined) {
      // Only validate after user has interacted
      const validationError = validateField(value);
      setError(validationError);
      onValidate(validationError);
    }
  }, [value, previousValue, onValidate]);

  return (
    <div>
      <input value={value} onChange={/* ... */} />
      {error && <span className="error">{error}</span>}
      {previousValue && value !== previousValue && (
        <span className="change-indicator">Changed</span>
      )}
    </div>
  );
}