Comments (7)
The last way is quite hardcore, at first I thought wait a minute, what happens if payload
changes? The useEffect
doesn't have it as a dependency. The effect will not run! Then I googled, what happens if we don't pass a second argument for a useEffect
, and the answer is it will run every single render. Then looking at the code again, oh there is a condition inside to control when the effect will run. That is pretty cool, I will bear this pattern in mind.
Having said that, I do like having an array of dependencies because when I'm reading someone else's code, I can ask, do I care what this particular useEffect
is doing and I'm lazy to read all the code inside the block... I can check the dependencies array. If it is [], I know it does something on mount. If it doesn't have the variable I'm interested in I can just skip it.... so listing stuff in the dependency array could save code maintenance time...
from blog-comments.
Excellent post
- Don't overuseEffect (1)
- No hugeEffects (2)
- Try to avoid anonymousEffects (3 & 4)
- And certainly never abuseEffect (5)
Never thought about naming the effect callback but it seems like a pretty sensible thing to do, it makes the intention of it more clear. I think moving each useEffect into a custom hook may be taking it litlle too far. Though there are people who take this a step further.
And small heads up: There's a typo in the second title: singe is missing an L.
from blog-comments.
@JulesBlm I've never had to usePrevious
. I also think it might go against the rules-of-react, because it reads from a ref during render, which is technically not allowed.
from blog-comments.
I wasn't aware that reading refs during render wasn't allowed. It's not really clear to me why it is bad. Are there are any downsides/risks to it now? Or will there be in the future with concurrent mode for example?
yes, concurrent mode (startTransition for example) can be troublesome. A ref
should be treated like an external store. There was a great talk from @dai-shi just two days ago about the problems with reading from external stores at react-conf, you can watch it here.
from blog-comments.
Ah yes, I could've been a bit more specific, stating what will happen if you leave out the dependency array :)
from blog-comments.
Also, I sometimes found myself using usePrevious()
to check if an effect callback should run: if (current !== previous)
. It does the job but I feel it may be "thinking in lifecycles" too much (componentDidUpdate
), it feels a bit against the grain. What you do you think about this?
from blog-comments.
@TkDodo thanks you for your reply, I had a feeling usePrevious
was icky. I wasn't aware that reading refs during render wasn't allowed. It's not really clear to me why it is bad. Are there are any downsides/risks to it now? Or will there be in the future with concurrent mode for example?
from blog-comments.
Related Issues (20)
- blog/testing-react-query HOT 65
- blog/react-query-and-type-script HOT 25
- blog/using-web-sockets-with-react-query HOT 5
- blog/effective-react-query-keys HOT 28
- blog/about-async-functions HOT 5
- blog/placeholder-and-initial-data-in-react-query HOT 1
- blog/react-query-as-a-state-manager HOT 24
- blog/react-query-error-handling HOT 39
- blog/use-state-vs-use-reducer HOT 5
- blog/mastering-mutations-in-react-query HOT 43
- blog/leveraging-the-query-function-context HOT 12
- blog/beware-the-leaking-any
- blog/2021-in-review HOT 7
- blog/road-to-refactoring HOT 1
- blog/always-provide-customer-value
- blog/offline-react-query HOT 1
- blog/optional-vs-undefined HOT 1
- blog/use-urgency
- blog/react-query-and-forms HOT 16
- blog/react-query-and-forms HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog-comments.