Matt
TTCTheo's Typesafe Cult
•Created by Matt on 2/3/2024 in #questions
Have I been re-inventing useReducer or Redux?
I am relatively new to React. Whenever I am using an array of objects as a state variable, I've been doing things like this to change just one object at a time:
setCoords((prev) => [
...prev.filter((item) => item.id !== "draggable" + index),
newCoords,
]);
A job I am applying to mentioned reducers so I looked up useReducer and Redux and it seems like they exist pretty much to solve this kind of problem (rather than having the filtering in the call to setCoords, I could have that in a reducer function or Redux might just do all that more or less for me). Is that correct?
8 replies
TTCTheo's Typesafe Cult
•Created by Matt on 1/29/2024 in #questions
Prevent Scroll with Three FIber on Mobile
In one of Theos videos he was going through portfolios and criticized the ones that let him scroll up and see an uncolored background. I just finished a game Jam using React Three Fiber to make a 3D game, but it is hard to play on mobile since scrolling around in the scene also starts scrolling around on the page. I made overflow hidden to try to prevent this, but it doesn't seem to fix it entirely. Probably the best solution would be to make the canvas fullscreen, which I could probably figure out, but I'm curious if there is any way to stop this pesky scroll behavior when it is not full screen. (a teammate most copied this part of the game from a poimandres demo, although I refactored it into smaller components, changed it to Typescript, added behaviors with the words, and replaced the assets with art my teammates made) Here is the minigame causing issues : https://tumblewords-dev.web.app/minigame1
2 replies
TTCTheo's Typesafe Cult
•Created by Matt on 1/21/2024 in #questions
<p> different re-render behavior than <div> in React?
I just ran into a super weird bug that a p tag inside a table was not re-rendering; it would disappear when the component re-rendered which caused an error that crashed everything when the component was removed (Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.)
I switched the p to a div and the problem went away. I also just tested with a p with text inside instead of a state variable and the same behavior happened. Is this a bug in React itself related to <p> nested in <td> (a weird thing to do I realized in hindsight)? I'm still a beginner so I never like to assume that, but it was a really weird bug.
Simply removing this one line fixes things: https://github.com/Rice-Tech/svgmorph/commit/16a5976e037de8b03b1ec14140aec9adc3a08767
6 replies
TTCTheo's Typesafe Cult
•Created by Matt on 1/19/2024 in #questions
useEffect, useState, and order of execution
I'm working on a fun little utility to make SVG morph animations and performance has become an issue with complex SVGs so I decided this is a good opportunity to properly learn about promises, async, await, etc. to avoid freezing the main thread (I've only been using React for the past couple of months and only really got into Javascript/Typescript since August). I have an onClick function that updates a state variable with the new SVG as string and then a useEffect where all the heavy processing happens. I hadn't worked on this project for a month and forgot that I did things in such a wierd way, so I initially made the onClick async and put a try catch finally in it. It actually mostly did what I wanted (the loading spinner which I turn off in the finally spins until the process is complete), but the program was still freezing and that's when I remembered the useEffect. For the purposes of the project, I probably should move everything around to be more reasonable, but I found the order of execution really interesting. I would have expected the try catch finally in the click handler to be done after changing the state variable, but it seems like it waits until after the dependent useEffect. Is that correct? Is this related to the funny way that updateState functions don't always work with the latest value so you have to do the updateState(prev=>prev+1) instead of updateState(state+1) thing if its updates twice within a function? Do useEffects insert themselves in the order of execution right after updateState functions in a way that would slow down a finally?
5 replies