React acting unpredictably

Nils Sens — Fri, 05 Mar 2021 19:31:02 +0000

update: one bug down. i had two identical key props on menu items! those were the ones where react didn't completely re-render...

I joined this community because the frustration level with React has reached the ceiling.

The website I'm working on is a small artist page.

Sorry, I can't make a minimum reproducible version of the bug. The whole project is here on GH (feel free to grab my physics HTML implementation [warning: matter's Runner doesn't yet shut down upon re-mount, so things fall faster on each menu load])

https://github.com/NeilSentence/galerie-sens

The menu has a bunch of colorful falling blocks in the form of HTML elements that receive their positional data from matter.js.

This menu can be opened by clicking on "menu", or by pressing the Escape key, implemented in a custom hook from src/components/utils/esckey.js.

The latter comes with a crazy bug:

1.1. When you use the EscKey function to open the menu, this only works from the home path (/) and the ones without images. But not from the gallery paths!
1.2. Although each of the paths includes the menu,
1.3. and the mouse click on menu also works (!)

The next issue that I think is really strange is

2.1 If I open any gallery section except "upcycling" & "oel & sand", and click on a painting (zoomed in view),
2.1.1 and I menu nav to another section, it starts in zoomed out view (correctly)
2.1.2 but if I switch between the abovementioned two, the zoomed in view remains open, only the content is replaced.
2.2.3 Before, it even had an extra messed up zoom factor, but that was fixed by adding numbered "key"-attributes.

3.1 If I navigate to another section, react remembers the previously loaded artwork info object's number, and upon nav, the new gallery section opens at the same image number, not with the first painting

3.2 causing an error when the first gallery section has more images than the next,
3.2.1 and you nav from a higher image obj number than the next has in total (undefined...).

The zoomed in view (einzelbild.js) is a nested component inside bilderwand.js.

I understand that React somehow decides when to re-render a component and when not, but I'm not sure, when and how.

It's cool when things fail and always fail, but this is random.

I've been trying to force re-render and I tried different ways of using state, to no avail.

These bugs almost turn me off from React!

Nothing is predictable or seemingly logically related... :/

Do I need to study how React is built in order to use it?

DEV Community: Nils Sens

React acting unpredictably

update: one bug down. i had two identical key props on menu items! those were the ones where react didn't completely re-render...