需要为反应中的每个击键调用一个 api，但响应可以有数千个对象

Question

I am using react and axios for frontend, and nextjs with prisma for backend. I have in the database 4000 exercices that contain fitness exercices. I want to create a function where by each key stroke, the api will look for the relevant exercice. I finished creating it, but i have some issues:

1. The main problem is that the response is delayed from the first keystrokes, because the payload response is tooo large. I created a scrollable UL element to render the elements, because I want to get also the Gif images. So the elements, if the API will find those, will be rendered on the screen.

2. If I add to each element an on click event, to select the exercice's Id, I get an error "too many re-rendering on the screen".

How can I optimise the function, and how can I solve the error of too many re-render on the screen? Nextjs tells me that it will create an infinite loop....

The frontend looks like this:

    const [open, setOpen] = useState(false);
    const [keyWord, setKeyWord] = useState('');
    const [array, setArray] = useState([]);
    const [exerciceId, setExerciceId] = useState('');


    // Add exercice
    const hadnleAddExercie = async event => {
        event.preventDefault();
        console.log('exercice added');
    }


    // Look for exercices
    const searchExercices = async event => {
        event.preventDefault();
        setKeyWord(event.target.value);
        const arrayExercices = await getExercicesByKeyWords(keyWord);
        setArray(arrayExercices);
        console.log(arrayExercices);
    }


<div className='flex mt-3 flex-col'>
                            <input onChange={searchExercices} required placeholder='Search by word...' className='border border-slate-400 p-1 rounded-md flex-1 max-w-sm my-2'/>    


                            <ul className='border border-slate-400 p-1 rounded-md max-w-sm my-2 max-h-52 overflow-scroll'>
                                {
                                    array.length > 1 && array.map(exercice => (
                                        <li key={exercice.id} className='flex flex-wrap p-2 bg-slate-200 m-2 items-center rounded-md'>
                                            <span><Image className='rounded-xl mr-2' priority width={40} height={40} src={exercice.gifUrl} alt={exercice.name}/></span>
                                            <span>{ exercice.name }</span>
                                        </li>
                                    ))
                                }
                            </ul>
                        </div>    

The backend Uses prisma and I use the OR clause to look for a word in different rows:

export default async function handler(req, res) {

    try {

        const param = req.query.slug[0];
        console.log(param);

        // Get exercices where the two rows contains a single parametter
        const exercices = await prisma.exercices.findMany({
            where: {
                OR: [
                        {
                            name:   {
                            contains: param
                        }
                    },
        
                        {
                            target: {
                            contains: param
                        }
                    },

                        {
                            equipment: {
                            contains: param
                        }
                    }
                ]
            }
        });
        
        res.status(200).send(exercices);
    } 
    catch (error) {
        console.log(error);
        res.status(500).send(error);
    }
}

An example can be this:

Only for finding an exercice I used 500mb...

Answer 1

Here are a few ways I can think of to optimize this:

1. Use pagination and fetch more results as user scrolls down or actually separate it by using pages. You can read more on how to implement pagination in Prisma here .
2. Add debounce to your search term so it doesn't actually fire on every single keystroke, you could use something like useDebounce .
3. Use React.memo to prevent the list from being re-rendered every time some state changes, only re-render it when the actual list changes.