CodeDiff Pro | Advanced Code Comparison

Original Lines

Modified Lines

Changes Detected

Original Code

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

// Component to display a list of tasks
const TaskList = ({ todos, filter }) => {
    const visibleTodos = todos.filter(todo => {
        if (filter === 'active') return !todo.completed;
        if (filter === 'completed') return todo.completed;
        return true;
    });

    return (
        <ul className="todo-list">
            {visibleTodos.map(todo => (
                <li key={todo.id} className={todo.completed ? 'completed' : ''}>
                    {todo.text}
                </li>
            ))}
        </ul>
    );
};
// End of TaskList component

Modified Code

import React, { useState, useCallback } from 'react'; // Added useCallback, removed useEffect

// Component for a list of items
const ItemList = ({ items, filter, onToggle }) => { // Renamed todos to items, onToggle added
    const getVisibleItems = useCallback(() => { // Introduced useCallback for performance
        return items.filter(item => { // Renamed todo to item
            if (filter === 'open') return !item.done; // Renamed 'active' to 'open', 'completed' to 'done'
            if (filter === 'closed') return item.done; 
            return true;
        });
    }, [items, filter]);

    const visibleItems = getVisibleItems(); // Use the memoized function

    return (
        <div className="item-container"> {/* Renamed ul to div, added class item-container */}
            {visibleItems.map(item => (
                <div key={item.id} onClick={() => onToggle(item.id)} className={`item ${item.done ? 'closed' : 'open'}`}>
                    {item.label} {/* Renamed text to label */}
                </div>
            ))}
        </div>
    );
};
// Component export change

Comparison Results

Side-by-side view with word-level highlighting

Original code will appear here

Click 'Compare Code' to begin analysis

Modified code will appear here

Word-level differences will be highlighted