CODE TEST2025-03-14

Claude 3.5 vs GPT-4o: React Component Generation

We asked both models to generate a complex React component: a Data Table with sorting, filtering, and pagination, using Tailwind CSS.

🧪 The Experiment

Prompt

Write a React functional component for a Data Table. It must accept specific props (data, columns). It must have client-side sorting, text filtering, and pagination (10 items per page). Use Tailwind CSS for styling. Do not use any external libraries like tanstack-table.

Parameters

Temperature: 0

Metric Tracked

Bugs Found

ClaudeWinner

import React, { useState, useMemo } from 'react';

// Claude 3.5 Sonnet Output
const DataTable = ({ data, columns }) => {
  const [sortConfig, setSortConfig] = useState(null);
  const [filter, setFilter] = useState('');
  const [page, setPage] = useState(1);
  const itemsPerPage = 10;

  // Sorting Logic
  const sortedData = useMemo(() => {
    let sortableItems = [...data];
    if (sortConfig !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [data, sortConfig]);

  // Filtering Logic
  const filteredData = useMemo(() => {
    return sortedData.filter(item =>
      Object.keys(item).some(key =>
        String(item[key]).toLowerCase().includes(filter.toLowerCase())
      )
    );
  }, [sortedData, filter]);

  // Pagination Logic
  const paginatedData = useMemo(() => {
    const startIndex = (page - 1) * itemsPerPage;
    return filteredData.slice(startIndex, startIndex + itemsPerPage);
  }, [filteredData, page]);
  
  // ... (render logic would go here)
  return <div>{/* Table Markup */}</div>;
};

ChatGPT

import React, { useState } from 'react';

// GPT-4o Output
// It forgot useMemo optimization, which causes re-renders.
const DataTable = ({ data, columns }) => {
  const [sortKey, setSortKey] = useState('');
  const [search, setSearch] = useState('');
  
  // Direct filtering in render body (less efficient)
  const filtered = data.filter(d => JSON.stringify(d).includes(search));
  
  // ...
  return (
    <div className="p-4">
      <input 
        type="text" 
        value={search} 
        onChange={e => setSearch(e.target.value)} 
        className="border p-2"
      />
      {/* Table implementation */}
    </div>
  );
};

Our Analysis

Claude 3.5 Sonnet produced a more optimized solution using `useMemo` hooks correctly to prevent unnecessary re-calculations. GPT-4o's solution worked but was less performant for large datasets and missed some edge cases in sorting.

Claude

WINNER

Generation Time12s

Estimated Cost$0.03

Bugs Found0

View Full Review

ChatGPT

Generation Time8s

Estimated Cost$0.02

Bugs Found1

View Full Review

Need more data?

We run new tests every week to help you choose the right tools.

Subscribe to Alerts

Join 15,000+ AI engineers & marketers.