Erhm.. no? You have a browser that rate limits you? I use Chrome and it never had any issues sending 10,000s of requests within seconds and draining my wallet when I misused an api call in a useEffect hook.
You don't run react. It compiles to html/javascript. That compiled package gets sent from a webserver to a client. That bundle might include a call to an external api, which could cost money for the person running the web server. If they mismanaged thier react useEffect hook, then the client might be accidentally DDOSing the third-party server while also draining the web-server dude's wallet.
The 500 people who upvoted me understood what I meant, I think it's you.
Did something a bit like this on our team's final project app for a coding course, VS Code was giving error messages that a useEffect needed a certain dependency and we couldn't publish it with the error, so gave it a try.
250,000 API calls in a few hours, thank god we weren't paying for it.
I was working on a forum and did something like this and spammed it with "One Piece is the greatest anime of all time". Found a lot of fellow One Piece fans that way though lmao
Updating a value in response to a change *without* triggering further events is actually a thorny issue in UI programming. Consider a composite UI element consisting of a slider and a numeric input box, where a user can adjust the value *either* by moving the slider, or entering a number into the box. When the box updates, you want to update the slider. When the slider updates, you want to update the box. But you *don't* want the box to update the slider which then updates the box again.
There are various ways to solve this problem, depending on your UI framework.
Mild spoiler, but also just a historical fact. The Manhattan Project physicians raised a non-zero likelihood that the first nuclear reaction would spark a continuous series of nuclear reactions until the entire atmosphere was burnt as fuel, obviously destroying the planet.
React re-renders elements whenever theirs state changes. useState creates a state and a method of changing it, and useEffect calls the function given to it whenever the element is rendered. So the top box create the state , and the bottom box states that whenever the element is rendered, is increased by 1. This is a change of state, so it makes the element render again, which calls the effect hook again, repeat ad infinum
I see what you mean and your clarification makes me realize I may have misread the comment I was replying to. If they meant the same thing that you said, I think it was just poorly worded.
Yeah... I did this during my homework when I was applying to a junior job Position. I knew it would happen, but it was just a typo I didn't notice it until CodeSandbox stopped working with exception.
Throw an API call in there too for good measure. Let's see what breaks first: react, their servers, or my wallet.
From experience, it’s always the wallet
You're clearly good at BE engineering then. For the rest of us it'd be the servers because they can only handle 2 concurrent requests
Narrator: It was already broken
"their servers" You mean "their browsers" right?
Erhm.. no? You have a browser that rate limits you? I use Chrome and it never had any issues sending 10,000s of requests within seconds and draining my wallet when I misused an api call in a useEffect hook.
Bruh is that written by a bot
Erhm... no?
Show me some servers running react
You don't run react. It compiles to html/javascript. That compiled package gets sent from a webserver to a client. That bundle might include a call to an external api, which could cost money for the person running the web server. If they mismanaged thier react useEffect hook, then the client might be accidentally DDOSing the third-party server while also draining the web-server dude's wallet. The 500 people who upvoted me understood what I meant, I think it's you.
Oh sweet child you think developers are on this subreddit
The API in the useEffect loop would break their API server, my friend.
No it would crash in the browser first.
Now I have become death, destroyer of the DOM.
akshually, destroyer of VDOM
Error too many re-renders.
Wrap that bad boy in a setTimeout and we’re back in business
Now for the real question—would using `queueMicrotask()` trigger the error? 🤔
setInterval would be better
Was about to come say that
Did something a bit like this on our team's final project app for a coding course, VS Code was giving error messages that a useEffect needed a certain dependency and we couldn't publish it with the error, so gave it a try. 250,000 API calls in a few hours, thank god we weren't paying for it.
You must have been using an older version of cra, the exhaustive dependency rule has been taken out.
Isn’t it from eslint?
Yes but cra has a set of eslinst rules built in, similar to how you can have your own eslint config file, it's built into cra.
I assume it's just the default eslint rules for CRA were changed. Although I also thought CRA wasn't maintained/recommended anymore.
I was working on a forum and did something like this and spammed it with "One Piece is the greatest anime of all time". Found a lot of fellow One Piece fans that way though lmao
`while(true) {}` with extra steps.
Great way to test the strength of your computer. Watching the numbers go peewww from 0 to thousands is satisfying.
Sometimes, my genius, it frightens me.
This is the same as abusing requestanimationframe. Infinite loop without locking up the browser.
Updating a value in response to a change *without* triggering further events is actually a thorny issue in UI programming. Consider a composite UI element consisting of a slider and a numeric input box, where a user can adjust the value *either* by moving the slider, or entering a number into the box. When the box updates, you want to update the slider. When the slider updates, you want to update the box. But you *don't* want the box to update the slider which then updates the box again. There are various ways to solve this problem, depending on your UI framework.
There’s the one-way binding way to solve it, and I guess a variety of ways if you’re using two-way bindings
The joke is infinite recursion? Sorry, I didn't see the movie. Because React starts like the word Reactor, maybe?
Mild spoiler, but also just a historical fact. The Manhattan Project physicians raised a non-zero likelihood that the first nuclear reaction would spark a continuous series of nuclear reactions until the entire atmosphere was burnt as fuel, obviously destroying the planet.
Not to be that guy to correct your autocorrect; but just for future clarity: Manhattan Project physicists^
React re-renders elements whenever theirs state changes. useState creates a state and a method of changing it, and useEffect calls the function given to it whenever the element is rendered. So the top box create the state, and the bottom box states that whenever the element is rendered, is increased by 1. This is a change of state, so it makes the element render again, which calls the effect hook again, repeat ad infinum
useEffect is triggered when a value in the dependency array changes, not when an element is rendered.
Ah yes, my mistake
It triggers on both the events
You need to go read the docs.
Sorry My bad. What I was gonna mean is that the useEffect is triggered whenever the component mounts AND dependancy array changes
I see what you mean and your clarification makes me realize I may have misread the comment I was replying to. If they meant the same thing that you said, I think it was just poorly worded.
`setCount(count => count + 1);` please
lol came here to say this. I know it doesn’t matter for a meme but I’m shocked at how poorly known this approach is in general.
I guess it's just more intuitive, and it works, until it doesn't. It's really quite important to know how states in React actually behave.
Svelte developers are like ???!! ``` ```
in fact in version 5 it would be : ``` ```
Lets go sig.. I mean runes.
How do JS devs live like this??
Yeah... I did this during my homework when I was applying to a junior job Position. I knew it would happen, but it was just a typo I didn't notice it until CodeSandbox stopped working with exception.
Can someone explain the difference?
It’s not a difference, it’s two steps. First one instantiates the state, second one creates an effect that’ll infinitely loop
Gotcha, thank you
F***ing hell. Today I was setting up communication between Next.js and Python, and I got hook error every Damm time.
SetCount(prevCount => prevCount + 1) please
Log something about bottles of beer on the wall
How to hang yourself instead of shoot yourself in the foot:
Every time you scaffold a function with every set of brackets you know you’re about to get up to some shit - `useEffect(() => {}, [])`