search

IllyaHavrulyk / leolang-frontend

Front-end application for LeoLang
0 stars 0 forks source link

Investigate input optimization with memoization and lodash #4

Open IllyaHavrulyk opened 1 year ago

IllyaHavrulyk commented 1 year ago

We have problem with input field optimization that whenever any symbol is entered, there will be call to backend. This can cause server blackout.

IllyaHavrulyk commented 1 year ago

Here are some resources for investigation. https://javascript.plainenglish.io/how-to-create-an-optimized-real-time-search-with-react-6dd4026f4fa9 https://medium.com/nerd-for-tech/debounce-your-search-react-input-optimization-fd270a8042b

bigheha commented 1 year ago

To decrease the usage of API calls, two tecniques should be used - debouncing and memoization. Debouncing is used to prevent the calling of an API every time when user changes the input field (types in or deletes one or more symbols). Articles provided offer two implementations of debouncing - one written by ourselves or using a debounce function from lodash library. Memoization is used to prevent two or more API calls woth same parameters. Again, provided articles offer two ways of implementation - one using a lodash function and another one using the React useMemo() hook.

bigheha commented 1 year ago

I suppose that we use vanilla JS for debounce and React useMemo() for memoization since lodash is not supported anymore, meaning that it might impact the longevity of the project.