5 ms·

There exists a book dedicated to explaining how to use a single React function

46 points by rozenmd 4y ago

pgsandstrom 4y ago
This doesn't surprise me, and I dont think it proves that useEffect is bad design. That being said, I think useEffect is a bit too beginner hostile. It kind of remindes me of ´reduce´. When used correctly it is really neat. But it can also be fragile and hard to understand. And just like ´reduce´ a simpler and less efficient solution should often be used. When I started using hooks I made wrappers such as "onMount", and it helped me a lot. Beginners should be encouraged to do so, even if it takes away some of useEffects cool features. In time, they will understand the more intricate details.
- rozenmd 4y ago
  As the author of the book mentioned, I agree. It seems like the eslint plugin (eslint-plugin-react-hooks) attempts to patch over the beginner-hostility by telling you what to do, but it doesn't actually explain why you should follow its advice.
- valenterry 4y ago
  Until the language/runtime gets better support to model those kind of things, I think frameworks like react will be stuck with a suboptimal solution of some kind. It will always either be magical and convenient, or it will be clear but boilerplatey. hooks/useEffect are the former. I hope that there will be improvements here (maybe through typescript) that really allow a better and more explicit concept/expression and composition of effects.
warkanlock 4y ago
React, at this point, has a weird vibe where it's easy to learn but hard to master, which is why it has multiple (if not thousands) videos/articles/tutorials/even frameworks that explain the basics, but a few ones go really into the weeds. Too many entrances for going to the same room
andy_ppp 4y ago
I really do find the idea that we’ve pushed everything into the render cycle and then provided means to filter out the running of said thing quite weird. I’ve started using zustand and init functions to set things up out of the rendering loop and I almost never have a useEffect that isn’t wrapped in another hook to name it (especially as is often the case my use effect is doing something like “useStartLeaderboard” which only triggers under quite complicated state setups). They are adding an even more magical hook (another special case) called “use” for dealing with promises. I really don’t like the use of a closure to manage if useEffect triggers and generally prefer code that is explicit. I suppose I could mitigate that a bit by naming the dependency array something like: const depsRenderOnInitOnly = []; useEffect(() =>{}, depsRenderOnInitOnly); Generally I love React but these are my main concerns right now. First class support for promises + asynchrony/await will be great, I just wish it wasn’t another thing hacked on top of hooks and the render/diffing loop.
franciscop 4y ago
It's 8 examples of programs/components that use the function and that all takes 47 pages, which is nothing out of the world IMHO. A how to learn by examples is usually lenghty content but not too dense, specially compared to other ways of learning (like explaining the concepts, or by first principles, or docs, etc).
rozenmd 4y ago
Author of the book here. If you're keen on reading more of what I have to say about React, you can check out my blog here: https://maxrozen.com/ https://maxrozen.com/
- acuozzo 4y ago
  This is a clever marketing ploy.
jeroenhd 4y ago
Looking at the associated Github repo: https://github.com/rozenmd/useEffect-examples https://github.com/rozenmd/useEffect-examples I don't understand who the target audience would be. I suppose some people may struggle with using hooks in React, especially if they've been taught React the quick and dirty way when they started working with the library. Most of these seem pretty obvious if you've read the documentation of React hooks and the last example doesn't have much to do with useAnything, it's applicable to many other data loading mechanisms as well. Pretty steep price for what the contents seem to be about, but then again I suppose some people would prefer to pay money to solve their problem rather than search the web themselves.
- rozenmd 4y ago
  Folks that "know JavaScript", and have to maintain/update a React app was the target audience, essentially folks taught React the quick and dirty way.
- xnorswap 4y ago
  The target audience would be someone like me. 70% of my work is backend, 30% frontend which itself is split between older technologies with a good chunk of react on top. Half the time I come to work on the front-end react has moved on yet another major version and it's really useful to have a reference to get me back up to speed. Searching the web is often not so helpful because blogs I find tend to be written by beginners who often get things just as wrong as I would if I figured something out then wrote a blog straight after. Documentation is more useful but often very dry and often doesn't explain what to do when things start to go wrong, such as diagnosing race conditions or the mysterious messages you sometimes get from react itself about things you're doing wrong. I don't know about this book in particular, but in general any books helping transition me from my react 1.0 days to modern react that go a little deeper than "intro to hooks" blog posts would be helpful. As for "pay money", it's the sort of book I'd hope my company would shell out for, at which point it seems a small cost for a team to have as a reference compared to all the other costs of software development, there's a learning and self improvement budget that needs to be spent after all, and not so many conferences one wants to go to post covid.
bilalq 4y ago
I think the flippant response to this is unwarranted. The content here is a 47 page ebook where I'm sure a lot of that will be code examples. Yeah, useEffect is a little complicated, but trying to frame it as "so complicated it needs a whole book" isn't quite fair.
- azangru 4y ago
  It is complicated, and React doesn't help, especially since it started calling useEffect with an empty dependencies array twice in strict mode in React 18. David Khourshid (of XState) has been going to conferences talking about how to use (or, preferably, not to use) the useEffect[0]. [0] - Here's one of his most recent talks: https://www.youtube.com/watch?v=eFGeStq8dZo https://www.youtube.com/watch?v=eFGeStq8dZo
hnbad 4y ago
There exists a book dedicated to explaining how to use a single CSS property: https://www.goodreads.com/book/show/28485920-get-ready-for-css-grid-layout https://www.goodreads.com/book/show/28485920-get-ready-for-c... Yeah, I know, that's cheating. Grid layout actually consists of multiple properties, but the point is that just because something can be described in a way that sounds trivial that doesn't mean it is trivial. There's also a book dedicated to async/await (and promises). You can describe useEffect by its behavior and interface and be done in a few sentences. But it's basically "side effects: the API" in React. You can use it to do complex things much like you can use CSS grid layouts to build complex layouts, and it's entirely reasonable to provide a more thorough guide for those who prefer to learn that way rather than through experimentation.
Zealotux 4y ago
This is why I dislike Twitter – although this behavior is not exclusive to this social network – with this kind of caustic post which is ultimately dishonest: this book looks like a very long article that goes into deep details about using a major part of React. And it also seems to be a way for the author to monetize their content and make it available offline, which is fine by me. Looks like Stroustrup's comment on programming languages can also be applied to JS UI libraries: the ones people complain about and the ones nobody uses.
mcphage 4y ago
Wait until you see how many books are dedicated to the "element of" function! Or the antiderivative function!
withinboredom 4y ago
This is why I use htmx for projects lately. No react, but react/flux type principles in the backend (php). It’s so nice to go back to just php and html that feels as fast as a react app.

46 points by rozenmd 4y ago

This doesn't surprise me, and I dont think it proves that useEffect is bad design. That being said, I think useEffect is a bit too beginner hostile. It kind of remindes me of ´reduce´. When used correctly it is really neat. But it can also be fragile and hard to understand. And just like ´reduce´ a simpler and less efficient solution should often be used. When I started using hooks I made wrappers such as "onMount", and it helped me a lot. Beginners should be encouraged to do so, even if it takes away some of useEffects cool features. In time, they will understand the more intricate details.

rozenmd 4y ago
As the author of the book mentioned, I agree. It seems like the eslint plugin (eslint-plugin-react-hooks) attempts to patch over the beginner-hostility by telling you what to do, but it doesn't actually explain why you should follow its advice.
valenterry 4y ago
Until the language/runtime gets better support to model those kind of things, I think frameworks like react will be stuck with a suboptimal solution of some kind. It will always either be magical and convenient, or it will be clear but boilerplatey. hooks/useEffect are the former. I hope that there will be improvements here (maybe through typescript) that really allow a better and more explicit concept/expression and composition of effects.

warkanlock 4y ago

React, at this point, has a weird vibe where it's easy to learn but hard to master, which is why it has multiple (if not thousands) videos/articles/tutorials/even frameworks that explain the basics, but a few ones go really into the weeds. Too many entrances for going to the same room

andy_ppp 4y ago

I really do find the idea that we’ve pushed everything into the render cycle and then provided means to filter out the running of said thing quite weird. I’ve started using zustand and init functions to set things up out of the rendering loop and I almost never have a useEffect that isn’t wrapped in another hook to name it (especially as is often the case my use effect is doing something like “useStartLeaderboard” which only triggers under quite complicated state setups). They are adding an even more magical hook (another special case) called “use” for dealing with promises. I really don’t like the use of a closure to manage if useEffect triggers and generally prefer code that is explicit. I suppose I could mitigate that a bit by naming the dependency array something like: const depsRenderOnInitOnly = []; useEffect(() =>{}, depsRenderOnInitOnly); Generally I love React but these are my main concerns right now. First class support for promises + asynchrony/await will be great, I just wish it wasn’t another thing hacked on top of hooks and the render/diffing loop.

franciscop 4y ago

It's 8 examples of programs/components that use the function and that all takes 47 pages, which is nothing out of the world IMHO. A how to learn by examples is usually lenghty content but not too dense, specially compared to other ways of learning (like explaining the concepts, or by first principles, or docs, etc).

rozenmd 4y ago

Author of the book here. If you're keen on reading more of what I have to say about React, you can check out my blog here: https://maxrozen.com/ https://maxrozen.com/

acuozzo 4y ago
This is a clever marketing ploy.

jeroenhd 4y ago

Looking at the associated Github repo: https://github.com/rozenmd/useEffect-examples https://github.com/rozenmd/useEffect-examples I don't understand who the target audience would be. I suppose some people may struggle with using hooks in React, especially if they've been taught React the quick and dirty way when they started working with the library. Most of these seem pretty obvious if you've read the documentation of React hooks and the last example doesn't have much to do with useAnything, it's applicable to many other data loading mechanisms as well. Pretty steep price for what the contents seem to be about, but then again I suppose some people would prefer to pay money to solve their problem rather than search the web themselves.

rozenmd 4y ago
Folks that "know JavaScript", and have to maintain/update a React app was the target audience, essentially folks taught React the quick and dirty way.
xnorswap 4y ago
The target audience would be someone like me. 70% of my work is backend, 30% frontend which itself is split between older technologies with a good chunk of react on top. Half the time I come to work on the front-end react has moved on yet another major version and it's really useful to have a reference to get me back up to speed. Searching the web is often not so helpful because blogs I find tend to be written by beginners who often get things just as wrong as I would if I figured something out then wrote a blog straight after. Documentation is more useful but often very dry and often doesn't explain what to do when things start to go wrong, such as diagnosing race conditions or the mysterious messages you sometimes get from react itself about things you're doing wrong. I don't know about this book in particular, but in general any books helping transition me from my react 1.0 days to modern react that go a little deeper than "intro to hooks" blog posts would be helpful. As for "pay money", it's the sort of book I'd hope my company would shell out for, at which point it seems a small cost for a team to have as a reference compared to all the other costs of software development, there's a learning and self improvement budget that needs to be spent after all, and not so many conferences one wants to go to post covid.

bilalq 4y ago

I think the flippant response to this is unwarranted. The content here is a 47 page ebook where I'm sure a lot of that will be code examples. Yeah, useEffect is a little complicated, but trying to frame it as "so complicated it needs a whole book" isn't quite fair.

azangru 4y ago
It is complicated, and React doesn't help, especially since it started calling useEffect with an empty dependencies array twice in strict mode in React 18. David Khourshid (of XState) has been going to conferences talking about how to use (or, preferably, not to use) the useEffect[0]. [0] - Here's one of his most recent talks: https://www.youtube.com/watch?v=eFGeStq8dZo https://www.youtube.com/watch?v=eFGeStq8dZo

hnbad 4y ago

There exists a book dedicated to explaining how to use a single CSS property: https://www.goodreads.com/book/show/28485920-get-ready-for-css-grid-layout https://www.goodreads.com/book/show/28485920-get-ready-for-c... Yeah, I know, that's cheating. Grid layout actually consists of multiple properties, but the point is that just because something can be described in a way that sounds trivial that doesn't mean it is trivial. There's also a book dedicated to async/await (and promises). You can describe useEffect by its behavior and interface and be done in a few sentences. But it's basically "side effects: the API" in React. You can use it to do complex things much like you can use CSS grid layouts to build complex layouts, and it's entirely reasonable to provide a more thorough guide for those who prefer to learn that way rather than through experimentation.

Zealotux 4y ago

This is why I dislike Twitter – although this behavior is not exclusive to this social network – with this kind of caustic post which is ultimately dishonest: this book looks like a very long article that goes into deep details about using a major part of React. And it also seems to be a way for the author to monetize their content and make it available offline, which is fine by me. Looks like Stroustrup's comment on programming languages can also be applied to JS UI libraries: the ones people complain about and the ones nobody uses.

mcphage 4y ago

Wait until you see how many books are dedicated to the "element of" function! Or the antiderivative function!

withinboredom 4y ago

This is why I use htmx for projects lately. No react, but react/flux type principles in the backend (php). It’s so nice to go back to just php and html that feels as fast as a react app.