Hacker News Reader

Comment by jrochkind1 | Hacker News Reader

> The code above collects user data by using the Axios API and prints it on the DOM. The useEffect and useState hooks make for more straightforward and concise code that is easy to understand and work on than the class components

More concise? It seems about identical to me.

More straightforward, easier to understand? I guess it's subjective? Defintiely not obvious to me, but I do come from an OO background.

easier to learn for beginners, as the article next says? Does anyone have any even anecdotal information on that, if they themselves are a beginner or know some?

It's really not obvious to me. I mean, these things are subjective (except for "concise" maybe), if lots of people are finding it more straightforward, easier to understand, easier to learn, then they are... but are they?

View on HN

> More straightforward, easier to understand? I guess it's subjective? Defintiely not obvious to me, but I do come from an OO background.

I had the exact same reaction to this code block. Using componentDidMount() made it clear what it was doing. Reading the functional version I have no idea how useEffect() equates to componentDidMount().

I am also from an OO background and am currently working on a very large Angular 12 project on the front-end with a C# back-end. I am really enjoying working with Angular ... I can quickly see at a glance what is going on and everything is structured and well organized. React often seems to be targeting developers coming from the "other direction", with a JS background first.

I also don't understand "hooks have made React easier to learn for beginners". My mind glazes over sometimes reading these various examples and I've been in the industry for decades.

To each their own I suppose.

Not sure this has much to do with OO vs Functional Hooks, more like reading the docs?

OO lifecycle: constructor, render, componendDidMount, render, (render, componentDidUpdate, render)*

FH lifecycle: (renderFn, useEffectFn | (useLayoutEffectFn, renderFn))+

For more in-depth musing over the exact behavior, see, for example: https://reacttraining.com/blog/useEffect-is-not-the-new-comp...

Just out of curiosity, about your Angular project, how large is "very large" in terms of component, module count? How long does it take to build?

I'm not satisfied with what I see in my current project at work, but that may be because of Windows and Windows Defender.

I think the problem is (not in particularly you) that people want apples to apples comparison.

There is no equivalent of lifecycle in hooks! Sure you can give some example of how to produce a componentDidMount, but that defeats the point of hooks.

The hooks api is designed to focus on dependencies and what to do in case a dependency changes. When there is an empty array as a dependency , that implies that this hook will never rerun as it has no dependency. Similarly, if there is one dependency, the hook will rerun when that dependency changes.

I think hooks are harder to learn for beginners, but better allow advanced users to separate concerns.

Yeah, the current docs don’t do a great job - I’ve felt like I need to write a really use-case tailored migration guide for my teammates who didn’t pick it up easily by osmosis. Luckily it looks like the React team is hard at work on a new set of docs that does a better job!

https://beta.reactjs.org/

Even though I'm not a beginner now, I could guess, seeing an array that contains a magic function at its nth index (useState), which could mutate n-1 th index, would have baffled the life out of me.

Maybe beginners these days are not much of a beginner at all ;)

Yes, my feelings exactly. :-)

Any idea how useState accomplishes the mutation of the n-1 element mechanically? Seems to violate the by-value and by-reference rules in my mental model of how javascript works.

I was originally guessing it was a syntax trick of destructuring where it’s actually calling some kind of property accessor behind the scenes even if you don’t type the parentheses. But the article says this also works so now I don’t know…

  const loadingTuple = React.useState(true)
  const loading = loadingTuple[0]
  const setLoading = loadingTuple[1]

  loading // true
  setLoading(false)
  loading // false

(Edited to fix code formatting)

Ah, the code example doesn't work. User ptx clarified in a separate comment that the author meant it as just psuedo-code; it's value will be different in the next function invocation: https://news.ycombinator.com/item?id=28969530

setLoading just pushes an element into a queue. Calling useState will create the queue and fill it with true as initial state during the first call and then run a reducer on the entire queue to calculate the latest state. Simply calling setLoading does not modify loading. When you push an update to a queue react will rerender the component and thereby call useState again which runs the reducer which returns the latest state.

https://news.ycombinator.com/item?id=28972892

I’m not a beginner using React any more. But useEffect is not straightforward at all when compared to the old methods (disclaimer: I also have a OO background).

Another thing that is not straightforward at all is to know when it will re-render children components and when it will not. I had to go through several blog posts to begin to understand it.

Then all that extra complexity starts sucking more when you figure out that an old server-rendering framework would work just fine for the app you are developing, it didn’t have to be a SPA in the first place. But React was chosen just because it’s the cool modern framework.

> Then all that extra complexity starts sucking more when you figure out that an old server-rendering framework would work just fine for the app you are developing, it didn’t have to be a SPA in the first place. But React was chosen just because it’s the cool modern framework.

I'm sad I cannot upvote this more than once.

I was a beginner with React a couple years ago and things like Class components were Greek to me.

Then I discovered hooks and everything clicked. Now I can practically write React with my eyes closed.

Reply on news.ycombinator.com