sometimes while writing new code i will | Next.js | Page 1

wary ocean Jul 17, 2022, 6:36 AM

#

like right now im playing around with SVG edge detection. here is my result with a certain value

#

and if i change that value, it will "fast reload" and re-do the edge detection, but it will also keep my old state there

#

resulting in a double up

#

whereas if i just reload ormally, it looks "normal" (no double up)

calm mica Jul 17, 2022, 6:47 AM

#

it seems to be an issue with the code rather than fast refresh

#

fast refresh will sometimes rerun useEffect and/or rerender some components, you need to make sure they clean up any side-effect they may create

#

react can also rerun useEffect multiple times so it is a good idea to already make the components resilient to this

wary ocean Jul 17, 2022, 6:49 AM

#

yea thats fair but im just playing around. i dont care if my code is strictly perfect in this "fast refresh" process

#

also most of the time its my other point about hot reloading that bugs me

#

also there was a thing before where i clicked on an svg and it spawned some circles that spread out radially until they hit an edge. if i did multiple clicks it would store each click in the state. then if i changed a value in my code e.g. how many circles to spawn per click, the fast refresh would re-run the logic that spreads them readially for each click i did before

#

which could be very slow

#

and if i tried to refresh it would hang and have to wait before actually refreshing

#

and i dont think theres any way around that

#

i tried "hard refresh" in chrome to no avail

#

might seem like a weird niche issue but that combined with my other problem just really bugs me

#

looked online and other people have asked for a toggle too. i dont see why it shouldnt be toggleable

calm mica Jul 17, 2022, 6:55 AM

#

wary ocean also there was a thing before where i clicked on an svg and it spawned some circ...

fast refersh does not trigger any events in the page, so I am not sure why you are seeing this behavior

wary ocean Jul 17, 2022, 6:55 AM

#

because i stored all of my clicks in state

#

sure i could have done some logic to detect when its ok to remove a click from state, but why should i ahve to do this? if i could toggle off fast reload it wouldnt matter

calm mica Jul 17, 2022, 6:57 AM

#

its ok to have the clicks in state, what is weird is this logic to animate them running when you save the file, it probably is running when it shouldn't like in an useEffect

wary ocean Jul 17, 2022, 6:58 AM

#

heres the thing tho, "shouldnt" is completely arbitrary. i dont care about best practices while i am just experimenting with something. and fast reload was getting in my way of quickly prototyping and experimenting

calm mica Jul 17, 2022, 6:58 AM

#

wary ocean looked online and other people have asked for a toggle too. i dont see why it sh...

its not toggleable because as you said it is a very niche request so it wouldn't make sense the increase the complexibility of the codebase to disable it

#

what you can probably do is not using next dev directly at all

wary ocean Jul 17, 2022, 6:59 AM

#

i wonder what the increase in complexity would look like. this particular problem of mine right now is niche, but ive seen many people express a want for a toggle in github issues etc.

wary ocean Jul 17, 2022, 6:59 AM

#

calm mica what you can probably do is not using `next dev` directly at all

oh?

calm mica Jul 17, 2022, 6:59 AM

#

maybe try using nodemon with next dev as the exec option and make it watch the components folder

#

but this will restart the entire process every time you save a file

#

another thing you could do before trying this, is breaking fast refresh on purpose

wary ocean Jul 17, 2022, 7:01 AM

#

oh interesting idea, thanks. i suppose another option is disabling autosave in Webstorm, right? that would probably only solve my first issue in this threads original mesage tho.

wary ocean Jul 17, 2022, 7:01 AM

#

calm mica another thing you could do before trying this, is breaking fast refresh on purpo...

how so? thanks for hearing out my rant by the way

calm mica Jul 17, 2022, 7:02 AM

#

there are a few rules that if not followed, the old refresh behavior will happen instead of fast refresh: https://nextjs.org/docs/basic-features/fast-refresh#limitations

#

like using a class component or an anonymous arrow function as the component

#

if this solves your issue, you can also try using // @refresh reset anywhere in the file

calm mica Jul 17, 2022, 7:04 AM

#

calm mica if this solves your issue, you can also try using `// @refresh reset` anywhere i...

I just remembered about this option after reading the doc page, so you don't need to do the breaking workarounds

wary ocean Jul 17, 2022, 7:05 AM

#

thanks, i think with all ur info i can work around my issues.

#

there's also a way to block the reload request in chrome, but the setting does not persist

#

someone on a github issue shared a node script of theirs that basically creates a proxy for port 3000 that blocks the requests. couldnt get it working for whatever reason tho 😦

calm mica Jul 17, 2022, 7:06 AM

#

I'm not sure how well a script like that would work because now they use sockets to refresh the state

wary ocean Jul 17, 2022, 7:07 AM

#

i do find it funny tho that they set up support for // @refresh reset (thus increasing codebase complexity) but they wont allow u to just toggle it off entirely out of personal preference

calm mica Jul 17, 2022, 7:08 AM

#

yeah thats a valid point

wary ocean Jul 17, 2022, 7:09 AM

#

oh, turns out CRA do provide support for an env variable that disables it. thats cool. i hope next.js add it in the future 🙂 anyway thats enough of that
thanks again!

calm mica Jul 17, 2022, 7:09 AM

#

np!

wary ocean Jul 17, 2022, 7:25 AM

#

🤦‍♂️ all i had to do in this case was move my edge detection logic to happen on some event e.g. click isntead of on component mount

#sometimes while writing new code i will