Common mistakes writing React components with hooks • Hacker News Board

Re: Common mistakes writing React components with hooks

#11

Post by rat9988 » Tue, Jul 21, 2020, 1:59 PM UTC

simonbarker87 wrote: post #7

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

I think this is an important nitpick though in your defence. I have just started learning React having become pretty competent with Angular (day job plus some hybrid apps) and I have to say that I'm struggling to understand its popularity compared to Angular. Angular feels fully fleshed out, adheres to MVC mostly and has nice separation of html, css and the UI TS code. I come from a native coding background so this f…

I don't see why the CSS is mixed with the rest. It clearly isn't. Mixing JS and HTML doesn't seem problematic to me.

Re: Common mistakes writing React components with hooks

#12

Post by jerrycruncher » Tue, Jul 21, 2020, 2:00 PM UTC

was744 wrote: post #6

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

Wikipedia says it's both https://en.wikipedia.org/wiki/React_(web_framework)

Yeah, I think that prior to the public release of the Context api (16.3) and Hooks (16.6), one could more easily make the argument that "it's just a display library."

Providing convenient mechanisms for managing high-level/application state moves them squarely into the framework category, imo.

Re: Common mistakes writing React components with hooks

#13

Post by bauerd » Tue, Jul 21, 2020, 2:00 PM UTC

simonbarker87 wrote: post #7

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

I think this is an important nitpick though in your defence. I have just started learning React having become pretty competent with Angular (day job plus some hybrid apps) and I have to say that I'm struggling to understand its popularity compared to Angular. Angular feels fully fleshed out, adheres to MVC mostly and has nice separation of html, css and the UI TS code. I come from a native coding background so this f…

Correct, React is essentially a tree diffing & reconciliation library tailored for the DOM. As such its foremost concern is to provide a declarative API for manipulating the UI tree.

How data flows into that tree is not its concern. This is why there's a wide variety of state management libraries available. Empirically I agree teams often get state management wrong, because it requires a different skillset than developing reusable UI components.

Frameworks like Angular make a lot of hard choices outside the view layer for you.

Re: Common mistakes writing React components with hooks

#14

Post by esquevin » Tue, Jul 21, 2020, 2:03 PM UTC

pg_bot wrote: post #8

I would argue that writing a React component with a hook is a mistake. There is usually an easier/clearer way to solve the problems that hooks are intended to solve with the existing React primitives.

Exemples would be welcome here as I've a strong belief that hooks made react components cleaner / shorter

Re: Common mistakes writing React components with hooks

#15

Post by steinuil » Tue, Jul 21, 2020, 2:07 PM UTC

The first one just feels like a premature optimization. Yes calling setCount forces a rerender of that component, but unless there's lots of subcomponents inside that component, I wouldn't bother. Chances are later you'll need that state in the view, and if you have "unexpected side effects" from rerendering then that is the problem.

The other tips are fine; effects should have a single responsibility and links and buttons should be accessible.

Re: Common mistakes writing React components with hooks

#16

Post by cryptica » Tue, Jul 21, 2020, 2:07 PM UTC

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

>> but React is not a framework

It's a framework which advertises itself as a library.

In reality, there is nothing library-like about bypassing the DOM for rendering and making developers use a custom programming language (JSX)... and please don't give me this tired old argument that JSX is not compulsory! Has anyone ever seen a real React application which does not use JSX? Exactly.

If 99.9999% of developers are using React as a framework, then for all general communication purposes, React is a framework.

Re: Common mistakes writing React components with hooks

#17

Post by tashoecraft » Tue, Jul 21, 2020, 2:10 PM UTC

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

I think React is both and when you describe it as either will depend on how you're using it. If you have a website with a couple of React components here and there, then you have React the library. If you have your app setup as a SPA, with react router, redux, react forms, maybe you started the app with createReactApp, etc, then you are using React the framework. I don't see how you can argue it's not a framework when every single piece of your app is a react specific piece. It's no longer just a view layer, it's an ecosystem of modules whose common ground is to turn React into a framework.

Re: Common mistakes writing React components with hooks

#18

Post by vishnu_ks » Tue, Jul 21, 2020, 2:10 PM UTC

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

What is difference between a front-end library and a front-end framework?

Re: Common mistakes writing React components with hooks

#19

Post by duxup » Tue, Jul 21, 2020, 2:12 PM UTC

steinuil wrote: post #15

The first one just feels like a premature optimization. Yes calling setCount forces a rerender of that component, but unless there's lots of subcomponents inside that component, I wouldn't bother. Chances are later you'll need that state in the view, and if you have "unexpected side effects" from rerendering then that is the problem. The other tips are fine; effects should have a single responsibility and links and b…

Yeah I felt the same way about the first one.

Yeah we're preventing re-renders there but what are we really preventing / saving, nothing significant?

Anytime I run into a situation where I didn't like how / when a component was re-rendering, it absolutely was not because there was a random bit of state like a counter was in state that didn't need to be... usually it was just a more complex situation unfolding.

It's a good illustrative example, but not a 'common mistake' IMO.

Re: Common mistakes writing React components with hooks

#20

Post by bauerd » Tue, Jul 21, 2020, 2:13 PM UTC

tashoecraft wrote: post #17

bauerd wrote: post #4

Nitpick, but React is not a framework, it's a library. People miss this point often eg when they compare React to Angular

I think React is both and when you describe it as either will depend on how you're using it. If you have a website with a couple of React components here and there, then you have React the library. If you have your app setup as a SPA, with react router, redux, react forms, maybe you started the app with createReactApp, etc, then you are using React the framework. I don't see how you can argue it's not a framework whe…

>If you have you're app setup as a SPA, with react router, redux, react forms, maybe you started the app with createReactApp, etc, then you are using React the framework

react-router, redux etc. are all different libraries. Point still stands: You have to pick and assemble these different parts yourself. And then still all those libraries don't call into your code, but your code includes and wires them up.