Hacker News new | past | comments | ask | show | jobs | submit login
There exists a book dedicated to explaining how to use a single React function (twitter.com/tomaka17)
46 points by rozenmd on Nov 15, 2022 | hide | past | favorite | 20 comments



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.


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.


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/


This is a clever marketing ploy.


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


There exists a book dedicated to explaining how to use a single CSS property: 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.


Looking at the associated Github repo: 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.


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.


> The target audience would be someone like me.

> ...

> As for "pay money", it's the sort of book I'd hope my company would shell out for

Have you read the new official React docs[0]? They are very elaborate, always up-to-date, contain officially blessed advice, and, from what I saw, are very beginner-friendly. Is there anything a book can add?

[0] - https://beta.reactjs.org/


I didn't know that this existed. It's very nice. The old documentation was really getting stale.


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.


I taught myself react the quick and dirty way, because I had to (company wanted to use it, and there were no one else willing and able to do it, or to teach me). It's not that long ago, yet useEffect wasn't even around then. I could probably make use of a book about it.

It also probably doesn't help that I taught myself JavaScript the same way, at the same time.


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.


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.


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.


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).


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.


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


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.


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




Join us for AI Startup School this June 16-17 in San Francisco!

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: