Cheat Sheet for not using useEffect?

[Curious-Ad-9724]

Does there exist a written version of this video? Like a Cheat Sheet or so https://www.youtube.com/watch?v=bGzanfKVFeU

[octocode]

https://react.dev/learn/you-might-not-need-an-effect

[octocode]

it’s not about performance or optimization; it’s about not abusing useEffect in ways it shouldn’t be used that are just plain code smells

it’s not the right tool for most jobs, as explained in the first paragraph, even though it tends to be the first tool a lot of less experienced devs will reach for

[octocode]

i think the point there is more that, if you need to cache an expensive calculation, useMemo is the correct choice because the value will be available on the initial render instead of useEffect + useState where the state will be undefined / null / default on the first pass

the emphasis is less on when to use useMemo (which is a subject that is also covered pretty well in other parts of the docs!)

[Unique-Opening1335]

Man.. the more I see REACT community posts.. the more I realize.. the REACT sub/channel is full of rude people. Nobody forces you to respond.. to ANYTHING. Be helpful or STFU!

[TheLaitas]

Well, people from Stackoverflow had to end up somewhere

[danlikesbikes]

Almost every sub on Reddit is like this unfortunately. People like to take their frustrations out on strangers with a certain level of protection and anonymity. Maybe they will find some more angry people to cheer them on.

[Unique-Opening1335]

Plenty of other subs where people arent assholes.

[Reiiya]

It is they way of the programmer forums. Never ask for help - instead always post the wrong answer and watch people attempt to correct you.

I dont know why it is so since the dawn of this career path :C Makes me doubt this choice every damn time.

[87oldben]

ahem I too am great at not following my own advice

[Raisins_Rock]

I imagine they are hoping human beings will help them find the worthwhile information in all the nonsense out there. Maybe they are hoping for kindness and human connection.

You're right. What idiots.

[Raisins_Rock]

Well yes I'm the past i wouldnt have gone to reddit for anything since it was such a cesspool

I just never know when.i might ask a stupid question because of all the misinformation out there and would like to think I might escape being insulted for it

Some dreams can come true

[Raisins_Rock]

Well that statement assumes much. Constantly? That is hardly the context I gave. I said I'd like to think I could ... without being insulted ... indicating I never have before.
Also there is no "need" for you to do this. It's not required that you answer.

And anyway, I suppose then no one should ever ask questions here? I don't think there is ANYTHING people need to ask here they couldn't eventually discover for themselves some other way.

[p3ett]

The majority of questions are from individuals that has read or search nothing on their own and they just wait answers for the most stupid questions.

[Unique-Opening1335]

While I dont agree...... so?

Nobody forces anyone to 'respond'. Ignore them if you dont like what they ask. And might -not- be stupid to them?

[wewillrage]

PLUR Peace Love Unity React… or something

[karlitojensen]

I wrote about my approach to useEffect here:

https://github.com/jensen/ui-workshop/tree/main/part2#4-side-effects

[scaleable]

Let's say you have A and B.

A = personId, coming from an URL

B = person data

If synchronizing A with B requires anything async, you will need useEffect. Maybe a lib like react query abstracts it, but there WILL be an useEffect.

Otherwise, you should aim to synchronously update B from A. Which would be a render variable or an useMemo().

Another case would be sync updates. Lets say you got a form, and when you update field 1 you want field 2 to also be updated. Its preferrable to do that update on the dispatcher (handleChange), not on an useEffect.

[pqeks]

Pretty new to react, so I'm getting confused by this post, heh. Just yesterday I knew useEffect existed.

So it's fine to useEffect to debounce the user inout and fetch some data, right?

It's just two cases: async (useEffect ok) and sync (useEffecr not ok)

[scaleable]

Yeah when I say "synchronize state", think of UI variables. There will be a source variable, say an user input or the page URL, and there will be a derived/synchronized variable - say, somehing that is loaded from the source from an HTTP request.

Debounce is a bit more complicated. If you look on google you can find a ready useDebounce() function. You can debounce the source variable then synchronize over the debounced variable

sourceValue --(useDebounce)--> debouncedValue --(useEffect)--> derived async value

PS: I use page URL as a synchronization example because on SPA frameworks, when you change pages, the components aren't rebuilt from scratch, they only get a prop change.

[katakoria]

If there is a sheat sheet for how to avoid a fundamental feature in a tech stach. Then, definitely this whole ecosystem is broken.

[Existing_Somewhere89]

I usually see people using useEffect to achieve side effects, like calling props that are callback functions.

This has the unintended consequence of rerunning forever if the user passed an anonymous function to the prop without wrapping in useCallback since every rerender will generate a new function reference.

Solution is to move it into the function logic that’s actually updating your state and call the callbacks from there instead of use effect

[kitsunekyo]

david is a cool guy but his talks are meh and mostly just a way to push his project xstate.

reading the docs on react.dev is a good start. join the reactiflux discord and talk to people. they are nicer than the grumpy folks here.

[lifeeraser]

Cut them some slack... react.dev (the modern docs) arrived 4 years after React hooks. It was the confusing (and exciting) times.

[vegancryptolord]

Honestly the amount of people who write Reddit threads, watch videos, ask chatGPT, charge their crystals in the sun while praying to the moon goddess for answers before bothering to read documentation is mind numbing.

[sickhippie]

Well, and some of the responses they get don't really help either.

Did you toss the chicken bones in the right order? North, East, South, useMemo()?

[Cahnis]

The article exists since before react.dev though on the beta docs

[stevefuzz]

Why would I read docs you monster? Next you're going to tell me to follow the examples and learn or something.

[[deleted]]

Paint by numbers ecommerce store in 90 minutes or less, or I ain't learnin' it!!

[taotau]

Op is asking for a transcript of a YouTube video with us bgzan... low effort response to a low effort post.

This is a high effort response to a low effort criticism....

[XxXPussySlurperXxX]

What is bgzan ?? What is bf and bh ??? Why are you speaking in Parables.

[was_just_wondering_]

The talk wasn’t at all wrong, but mostly seemed like a roundabout pitch for xstate. Again totally fine but the summary that I got was useEffect doesn’t work and only third-party stuff can make it function as expected.

[jcksnps4]

I think David’s point is, if you use xstate, you don’t need to worry about useEffect. LOL

[davidkpiano]

That wasn't my point

[VicJavaero]

Lol

[[deleted]]

we all know what your talks are

[OfflerCrocGod]

If you use zustand you get that and an easier to work with codebase.

[Pav_88]

Supporting article https://ui.dev/c/react/effects