react-hooks/exhaustive-deps 导致依赖警告，修复挂起代码

Question

Im working on a project and have incorporated Hooks for the first time. When using the useEffects and useState hooks, Im encountering a wierd warning from eslint.

My Code:

import React, { useState, useEffect } from 'react';
import { Card } from 'antd';
import Search from 'antd/lib/input/Search';
import { IPatient } from 'types/IPatient';

const SearchBox = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState<IPatient[]>([]);

    const handleChange = (event: any) => {
        setSearchTerm(event.target.value);
    };
    const cards: IPatient[] = [
        {
            id: 1,
            name: 'Erling',
            description: ['tall', 'male', 'sick'],
            age: 98,
            isHuman: true,
        },

        // other data...
    ];

    useEffect(() => {
        const results: IPatient[] = cards.filter((card) =>
            card.name.toLowerCase().includes(searchTerm),
        );
        setSearchResults(results);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [searchTerm]);

    return (
        <>
            <div className="searchbox">
                <Search onChange={handleChange} />
            </div>
            <div>
                {searchResults.map((data) => (
                    <Card key={data.id} hoverable>
                        <h1>{data.name}</h1>
                        <p>Patient ID: {data.id} </p>
                        <p>Age: {data.age} years old.</p>
                        <p>
                            Description:{' '}
                            {data.description[0] +
                                ' ' +
                                data.description[1] +
                                ' ' +
                                data.description[2]}
                        </p>
                    </Card>
                ))}
            </div>
        </>
    );
};
export default SearchBox;

Now, the issue is that eslint is calling an error on my dependency array, and if I put both variables (cards and searchTerms) inside the array, it results in the code hanging and the webapp crashing. The eslint-line is currently in place to suppress the warning, but this is less than ideal.

So I guess my question is how to circumvent this. I am sure this a Beginners mistake, as it is my first time with Hooks. Any help would be appreciated!

Answer 1

The problem when adding cards to the dependency array is that you are creating a new reference of cards array on each rerender and hence the useEffect runs again, causing an infinite loop

Since Card array seems to be const you can take it out of functional component and then add it to dependency array

const cards: IPatient[] = [
    {
        id: 1,
        name: 'Erling',
        description: ['tall', 'male', 'sick'],
        age: 98,
        isHuman: true,
    },

    // other data...
];


const SearchBox = () => {
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState<IPatient[]>([]);

    const handleChange = (event: any) => {
        setSearchTerm(event.target.value);
    };

    useEffect(() => {
        const results: IPatient[] = cards.filter((card) =>
            card.name.toLowerCase().includes(searchTerm),
        );
        setSearchResults(results);
    }, [searchTerm, cards]);

   ...