bahnzumberg / zuugle-suchseite

Public repository for www.zuugle.at
https://www.zuugle.at
GNU General Public License v3.0
6 stars 10 forks source link

Remove unnecessary re-renders / page refresh #330

Closed Falsal closed 4 weeks ago

Falsal commented 1 month ago

In certain cases like when using the search bar/button the page re-renders a few times, making unnecessary calls to the backend. Normally, in development there are 2 re-renders (React 18) but this case goes beyond that and actually making an additional call.

If you slow the speed of Network , you can better follow the unwanted re-renders.

The goal of this issue is, to remove all unnecessary re-renders and reloads.

Installation:

  1. nvm install 20.5.0
  2. nvm use 20.5.0
  3. npm install

Running the application:

  1. npm run start-remote-api
  2. http://localhost:3000/suche?city=wien

GitHub Branch:

martinheppner commented 1 month ago

The video shows the unnecessary reloads:

https://github.com/bahnzumberg/zuugle-suchseite/assets/105971399/8a3f19f0-af15-4025-837e-4423c4099f4d

Falsal commented 1 month ago

we seem to have different behavior in the search functionality depending on the network speed. So on slow 3G speed, upon clicking search and after a few renders the final-render is giving the correct cards on top of the list shown but below them other cards which should not be there. On fast networks we get the correct result list of cards after a few renders.

Falsal commented 1 month ago

@martinheppner : Situation on Tuesday 21st May: checked the updated version of branch "unnecessary-reloads", but the behaviour of the search functionality on results page (Main.js) remains the same as before. A video link is pasted here: https://www.loom.com/share/9af0e0b96f3d43c694dc7d19ba20ba6f?sid=1bfb7ba3-fd37-43bd-8837-df29474460a0

Falsal commented 1 month ago

The job is completed except for one item that was a result of this work, FAL will do the fix and will close this issue as soon as it is done.

Falsal commented 1 month ago

issue is setting filter to localStorage value when re-opening filter form.

Falsal commented 4 weeks ago

done