DEV Community

Nils Sens
Nils Sens

Posted on

React acting unpredictably

#react

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?

Top comments (5)

Collapse
 
aarongarvey profile image
Aaron Garvey •

Not sure if this is related to your menu bug but in your menu.js file you have

let menuOpen = showMenu;

But this just seems to reference the showMenu which is encapsulated in a useState. So the showMenu would be persisted successfully between renders in react, but your menuOpen variable is being reset on each render.

Is that intentional? Could possibly lead to some undersides behaviour if it becomes out of sync between actions. E.g everything is fine upon an initial load, but a couple of state changes/re-renders later you may end up out of sync.

Collapse
 
neilsentence profile image
Nils Sens •

If I drop the esckey custom hook for:

// EVENT LISTENER FOR ESCAPE KEY:

let menuCheckForKeyEvent = false

document.addEventListener('keydown',function(evt){

    //evt.stopImmediatePropagation()

    if (document.querySelector('.page_titel') !== null) {
        evt = evt || window.event

        if (evt.keyCode === 27) {
            if (menuCheckForKeyEvent) {
                killMenu()
                menuCheckForKeyEvent = false
            }
            else if (!menuCheckForKeyEvent) {
                setManualSet(true)
                setShowMenu(true)
                setRemoveNonMenuHtml(false)
                menuCheckForKeyEvent = true
            }
        }
    }
})
Enter fullscreen mode Exit fullscreen mode

inside menu.js, it kinda works but here, after any menu navigation I have to press esc twice. So here, your point holds.

I'll have to use this one first, as it at least doesn't totally eliminate the functionality after nav.

Collapse
 
neilsentence profile image
Nils Sens •

Another aspect of the bug is that the menu toggle using esc key works flawlessly when the page loads on those routes without image gallery sections.

Once I use the menu to navigate, the esc toggle ceases to function.

Collapse
 
neilsentence profile image
Nils Sens • • Edited

No, uhm sorry should have cleaned that up - the "menuOpen" was an (unsuccessful) attempt to prevent just that.

It does get reset upon re-render - just for the click events. Not for esc key press.

Which is weird.

Thank you for taking the time to look at it!! :)

Collapse
 
neilsentence profile image
Nils Sens •

I switched most components from class based to functional, which I heard is the modern way.

So I can't use "lifecycle methods", and I had to tinker with some "useEffect" "hook" which I don't fully understand.

I'm happy when stuff just breaks and fails consistently. Then I know I messed up and need to build it in a different way.

But here, things work and then don't.

Read next

bladearya profile image

Implementing Redux in Next.js (App Router): A Comprehensive Guide

Amit Kumar Rout -

radzion profile image

Creating an Interactive Time-Tracking Report with React and TypeScript

Radzion Chachura -

yutakusuno profile image

[Next.js14] Firebase Authentication with Google sign-in using cookies, middleware, and Server Actions

Yuta Kusuno -

youcefbedrani_64 profile image

Bridging the Gap: Sharing Data Between React Native and WebView

Mohammed Adel (Youcef) -