useEffect with multiple dependencies

App.jsx

import 'bootstrap/dist/css/bootstrap.min.css';
import * as bootstrap from 'bootstrap';

import { useEffect, useState } from "react";
import axios from 'axios';
import useGroceries from './hooks/useGroceries';

const groceryData = [
    { name: 'Milk', category: 'Drink' },
    { name: 'Bread', category: 'Food' },
    { name: 'Rice', category: 'Food' },
    { name: 'Coffee', category: 'Drink' },
    { name: 'Tea', category: 'Drink' },
    { name: 'Prime', category: 'Drink' },
    { name: 'Carrot', category: 'Vegetable' },
    { name: 'Bell Pepper', category: 'Vegetable' },
    { name: 'Brocolli', category: 'Vegetable' },
    { name: 'Chicken Wings', category: 'Meat' },
    { name: 'Cheese', category: 'Food' },
    { name: 'Diced Beef', category: 'Meat' },
    { name: 'Pork Rib', category: 'Meat' },
    { name: 'Glue', category: 'Miscellaneous' },
    { name: 'Christmas Tree', category: 'Miscellaneous' },
    { name: 'Paw Patrol Shirt', category: 'Miscellaneous' },
];

function App() {
    const [groceryList, setGroceryList] = useState(groceryData);

    const [search, setSearch] = useState('');
    const [selectedCategory, setSelectedCategory] = useState('all');

    const filterList = () => {
        let filteredList = groceryData;
        if (selectedCategory !== 'all') {
            filteredList = filteredList.filter((grocery) => grocery.category === selectedCategory);
        }

        if (search !== '') {
            filteredList = filteredList.filter((grocery) => grocery.name.toLowerCase().includes(search.toLowerCase()));
        }

        setGroceryList(filteredList)
    };

    useEffect(filterList, [search, selectedCategory]);

    return (
        <div className="container">
            <div className="">
                <label htmlFor="search">Search grocery</label>
                <br />
                <input
                    id="search"
                    className='form-control'
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                />
                <br />
                <label htmlFor="category">Filter by Category</label>
                <br />
                <select
                    id="category"
                    className='form-control'
                    value={selectedCategory}
                    onChange={(e) => setSelectedCategory(e.target.value)}
                >
                    <option value="all">All categories</option>
                    <option value="Food">Food</option>
                    <option value="Drink">Drink</option>
                    <option value="Vegetable">Vegetable</option>
                    <option value="Meat">Meat</option>
                    <option value="Miscellaneous">Miscellaneous</option>
                </select>
            </div>
            <div className="mt-4">
                <p>Grocery List</p>
                <ol>
                    { groceryList.map((grocery) => {
                        return <li key={grocery.name}>{grocery.name}</li>
                    })}
                </ol>
            </div>
        </div>
    );
}

export default App;