Common mistakes writing React components with hooks • Hacker News Board

Re: Common mistakes writing React components with hooks

#21

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

bauerd wrote: post #20

tashoecraft wrote: post #17

Earlier quoted context omitted.

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.

Whether or not they are different libraries doesn't matter. Once you've done any real development with them good luck trying to take out your small, simple library and replace it with another. Why are so many React devs so against the word framework, it's like they treat it how many treat monolith "It's a bad word we can't be compared against, even when you can't tell us apart"

Re: Common mistakes writing React components with hooks

#22

Post by simonbarker87 » Tue, Jul 21, 2020, 2:19 PM UTC

rat9988 wrote: post #11

simonbarker87 wrote: post #7

Earlier quoted context omitted.

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.

Depends if you use CSS modules or the styled component library.

I've mixed plenty of html and js over the years and even html and php and it's nice to not have to anymore. Something about JSX rubs me the wrong way.

Re: Common mistakes writing React components with hooks

#23

Post by city41 » Tue, Jul 21, 2020, 2:22 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…

To add to this, the React docs state you should never rely on renders for side effects. In dev mode, React will even render your components twice to suss out any render relying side effect bugs. Your component should always work the same whether it's rendered once or rendered a million times.

Re: Common mistakes writing React components with hooks

#24

Post by fendy3002 » Tue, Jul 21, 2020, 2:24 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.

I haven't use hooks and don't prefer it, however I must say that there isn't alternative to hooks that is shorter in syntax, and maybe easier.

Re: Common mistakes writing React components with hooks

#25

Post by luhego » Tue, Jul 21, 2020, 2:27 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

Moment.js is a library, you can use in any part of your app and it doesn't define how your application is going to work. You are in charge of the flow of the application. React pretty much defines how your application is going to work from the beginning. It can call itself a "library" but by any practical means, it isn't.

Re: Common mistakes writing React components with hooks

#26

Post by flowerlad » Tue, Jul 21, 2020, 2:29 PM UTC

esquevin wrote: post #14

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

For one thing you may not use the ref attribute on function components because they don’t have instances. That means the component can't have a .focus() method for example.

For simple components hooks may be fine. For more complex ones I prefer classes.

Re: Common mistakes writing React components with hooks

#27

Post by LorenzA » Tue, Jul 21, 2020, 2:32 PM UTC

byte1918 wrote: post #5

> useEffect(() => { > fetchData(); > updateBreadcrumbs(); > }, [location.pathname]); > There are two use cases, the "data-fetching" and "displaying breadcrumbs". Both are updated with an useEffect hook. This single useEffect hooks will run when the fetchData and updateBreadcrumbs functions or the location changes. Is this right? Wouldn't they only update when `location.pathname` changes? Also, there should be a whole…

yes seems also wrong to me. not sure what linter would complain here, that would depend a little bit what fetchData & updateBreadcrumbs really use and do.

a much bigger problem with code like this is the fetching of data gets much more complicated when the second parameter of useEffect is not just an empty array

Re: Common mistakes writing React components with hooks

#28

Post by fendy3002 » Tue, Jul 21, 2020, 2:33 PM UTC

luhego wrote: post #25

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

Moment.js is a library, you can use in any part of your app and it doesn't define how your application is going to work. You are in charge of the flow of the application. React pretty much defines how your application is going to work from the beginning. It can call itself a "library" but by any practical means, it isn't.

Kinda disagree. Though I usually use it as a full page form, it's easy to use it as single component and use it via javascript natively.

Let's say that if I want my own version of select2, I can develop it with react, though not easy.

Re: Common mistakes writing React components with hooks

#29

Post by Octoth0rpe » Tue, Jul 21, 2020, 2:34 PM UTC

flowerlad wrote: post #26

esquevin wrote: post #14

Earlier quoted context omitted.

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

For one thing you may not use the ref attribute on function components because they don’t have instances. That means the component can't have a .focus() method for example. For simple components hooks may be fine. For more complex ones I prefer classes.

I believe the useRef hook is used for this problem:

https://reactjs.org/docs/hooks-reference.html#useref

The example even uses .focus()

Re: Common mistakes writing React components with hooks

#30

Post by qudat » Tue, Jul 21, 2020, 2:35 PM UTC

cryptica wrote: post #16

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 us…

> Has anyone ever seen a real React application which does not use JSX?

I've built one without using JSX and I think it's superior. The problem is the tooling and type support just isn't there so going against the grain here is pretty much asking to be burnt.