Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Common mistakes writing React components with hooks

lorenzweiss.de

Post reply on HN
Print view View original

31–40 of 98 posts

Re: Common mistakes writing React components with hooks

#31

Post by bulgr0z »

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…

> The first one just feels like a premature optimization

It is in a browser context, but less with React Native which relies way more on refs. It also never hurts (imho) to explain why refs exist and why/where to use them as they can easily be abused (and often are) by devs trying to replicate OOP patterns in React.

Re: Common mistakes writing React components with hooks

#32

Post by fendy3002 »

tashoecraft wrote: post #21
bauerd wrote: post #20

Earlier quoted context omitted.

>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"

Well I sometimes use react to replace a component, such as develop a button which needs to be clicked twice to submit just by simple state management.

Though I don't know if it still can be considered as framework or not.

Re: Common mistakes writing React components with hooks

#33

Post by qudat »

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 get what you're saying but disagree. Hooks are essential and make life much easier for the react developer, especially when using something like `react-redux` or `react-router`. Prop-drilling or HoC might seem like a better design until you actually have to work in a system that leverages them and realize it's an indirection nightmare.

Re: Common mistakes writing React components with hooks

#34

Post by cnity »

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.

That's just not true: https://reactjs.org/docs/forwarding-refs.html

Re: Common mistakes writing React components with hooks

#35

Post by kristiandupont »

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…

MVC is a popular pattern but it's not the only way to do UI. I don't personally care for it and I am happy that React doesn't force it on me.

As for mixing HTML, JS and CSS, I consider that a feature. Why do you want those separated? The reason for me to group code in a file, a folder or at a higher level, in a repository, is that I create a little mental context for what I am going to work on and I want the structure to enable that as much as possible. Now, when I am focusing on some feature it is much more likely that I will be switching back and forth between the HTML, CSS and JS of a component than switching between the CSS of one component to another.

It happens, of course, that I get into a mode where I want to edit many CSS files in one go for whatever reason, it's just much less common and thus I don't want to optimize for that case.

Re: Common mistakes writing React components with hooks

#36

Post by [deleted] »

jerrycruncher wrote: post #12
was744 wrote: post #6

Earlier quoted context omitted.

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.

[deleted]

Re: Common mistakes writing React components with hooks

#37

Post by jordanwallwork »

fendy3002 wrote: post #24
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.

Yeah I wasn't sold on hooks at first, mainly because I was having to re-think stuff that I already knew, but man now I'm used to them I'm so much more productive and I absolutely love it

Re: Common mistakes writing React components with hooks

#38

Post by avery42 »

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.

Maybe I misunderstood, but isn't this what `React.forwardRef` is for?

Re: Common mistakes writing React components with hooks

#39

Post by jfkebwjsbx »

vishnu_ks wrote: post #18
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?

A library is added to a project.

A project is added to a framework.

Re: Common mistakes writing React components with hooks

#40

Post by tekkk »

A recent thing which has been rubbing me the wrong way in React has been the exhaustive dependencies for useEffect and other hooks.

Sure, in the case someone would alter say the function provided as props it should be included in the dependency array. Yet in most cases, such as the example #3 in the article, this would not happen (or be even desired). Rather, if it did it would be a bug and an appropriate error would better.

So if you wanted to adhere to the strict CRA linter's exhaustive dependencies rule, you should add the fetchData function as a dependency. Or if you moved the whole function inside the useEffect, then the onSuccess. Which makes even less sense now that I've written it down.

Post reply on HN