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

Why React Re-Renders

joshwcomeau.com

Post reply on HN
Print view View original

21–30 of 168 posts

Re: Why React Re-Renders

#21

Post by 411111111111111 »

azangru wrote: post #15
outworlder wrote: post #11

Earlier quoted context omitted.

What would they be using instead?

They should probably start with native browser apis for DOM manipulation, and web components. And then explore the current landscape for options that alleviate the pain points discovered while learning (e.g. Lit is nice for declarative reactive components). All the while being conscious of the tradeoffs.

That's a fine idea if you're not expecting the team to grow beyond the original author(s).

It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production.

Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as bad as some people on hn claim.

Re: Why React Re-Renders

#22

Post by tshaddox »

PeterWhittaker wrote: post #12

I sometimes wonder what people are using React for, that they wouldn’t know this or have figured it out along the way. Let me kind of explain, as best I can, without code. We have a complex software product, an integrated compliance and risk management system with embedded workflow, automatic highlighting of potential risks due to non-compliance, plans of actions (aka risk management plans), RBAC, ABAC (used to contr…

> I sometimes wonder what people are using React for, that they wouldn’t know this or have figured it out along the way.

The article is for beginners (the article itself says its intended audience beginner-intermediate, but I'd say it leans very much towards beginner). Thus this is precisely an example of how people who use React would learn this. It would be odd to comment on every explanation of a concept that everyone would have already learned that concept.

Re: Why React Re-Renders

#23

Post by acemarke »

Josh's post is excellent!

Related, a couple years back I wrote a post on the same topic: "A (Mostly) Complete Guide to React Rendering Behavior" [0]. It's longer and has more details, but fewer diagrams :) (Josh's ability to make interactive posts is amazing.)

I originally wrote my "Rendering Behavior" post specifically because the existing React docs didn't clearly spell out this kind of behavior, and I was _constantly_ seeing questions that showed people didn't understand these concepts well. For example, many folks assume that "React re-renders my component when its props change", when in fact the real answer is that "React re-renders recursively by default, _regardless_ of whether or not any props changed". There's also a lot of confusion over how Context ends up affecting renders, and I've seen folks end up in situations where setting state in an "context provider" parent component ends up rendering the _entire_ app - not because Context changed, but because they did a `setState()` and that's the natural behavior. So, I was trying to help clarify those sorts of nuances.

I can say that it's been one of the top couple posts I've written in terms of traffic and positive feedback (along with my "Redux vs Context differences" post).

The good news is that the new React beta docs [1] _do_ cover at least some of this rendering info, although it's more contextual in various points of the explanations and in less detail. I'm hopeful that after the main tutorial/API reference material is done and the docs are opened up for external contributions, that we can help add a couple pages that cover some of this rendering behavior info as well.

There's a few other good articles I've also seen covering this topic as well [2] [3] [4].

[0] https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-...

[1] https://beta.reactjs.org

[2] https://www.zhenghao.io/posts/react-rerender

[3] https://alexsidorenko.com/blog/react-render-cheat-sheet/

[4] https://www.developerway.com/posts/react-re-renders-guide

Re: Why React Re-Renders

#24

Post by lioeters »

spoils19 wrote: post #13
4pkjai wrote: post #4

Earlier quoted context omitted.

I'm among the React developers who don't really know how it works under the hood. Recently I needed to code a UI that required mouse drag events. It ran like a pig when I did it in React. I tried a few things to speed it up, but eventually gave up and did the UI in plain old Javascript. It runs a hell of a lot better, but the code does feel a lot more flimsy. Edit: Here's a demo of the UI I built https://www.youtube.…

I'm no expert, but mouse drag events in React are fairly simple to get working performantly, even without understanding how it works under the hood. There are even many libraries that provide functionality, all without it running 'like a pig'.

Also:

> Can pigs run fast? Domestic pigs can run as fast as 17 km/h while wild pigs can reach a speed of 30 km/h!

Re: Why React Re-Renders

#25

Post by azangru »

411111111111111 wrote: post #21
azangru wrote: post #15

Earlier quoted context omitted.

They should probably start with native browser apis for DOM manipulation, and web components. And then explore the current landscape for options that alleviate the pain points discovered while learning (e.g. Lit is nice for declarative reactive components). All the while being conscious of the tradeoffs.

That's a fine idea if you're not expecting the team to grow beyond the original author(s). It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production. Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as b…

How much have you researched this space? Do you know of companies that are successfully building their products with web components? Hint: these would include Adobe, Microsoft, RedHat, and GitHub. How do they onboard new members to their terrible setup, one might wonder?

Re: Why React Re-Renders

#26

Post by 4pkjai »

IceDane wrote: post #18
4pkjai wrote: post #4

Earlier quoted context omitted.

I'm among the React developers who don't really know how it works under the hood. Recently I needed to code a UI that required mouse drag events. It ran like a pig when I did it in React. I tried a few things to speed it up, but eventually gave up and did the UI in plain old Javascript. It runs a hell of a lot better, but the code does feel a lot more flimsy. Edit: Here's a demo of the UI I built https://www.youtube.…

There is nothing about react that requires you to understand "how it works under the hood" to use mouse events in react. You just need to sit down and read the tutorials and learn to use react properly. Try the new beta docs.

True, but I'm quite happy using VanillaJS. I'd like to avoid React as much as possible in the future.

Re: Why React Re-Renders

#27

Post by 411111111111111 »

azangru wrote: post #25
411111111111111 wrote: post #21

Earlier quoted context omitted.

That's a fine idea if you're not expecting the team to grow beyond the original author(s). It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production. Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as b…

How much have you researched this space? Do you know of companies that are successfully building their products with web components? Hint: these would include Adobe, Microsoft, RedHat, and GitHub. How do they onboard new members to their terrible setup, one might wonder?

Sure, if that's the scale of your project right from the start then creating a new framework from scratch is always an option.

That's the origin of both react(Facebook) and angular(google) after all.

Re: Why React Re-Renders

#28

Post by cercatrova »

411111111111111 wrote: post #21
azangru wrote: post #15

Earlier quoted context omitted.

They should probably start with native browser apis for DOM manipulation, and web components. And then explore the current landscape for options that alleviate the pain points discovered while learning (e.g. Lit is nice for declarative reactive components). All the while being conscious of the tradeoffs.

That's a fine idea if you're not expecting the team to grow beyond the original author(s). It's a pretty terrible idea if you're going to do it in a business setting, as the original author(s) will always be it's Achilles tendon, making the project a liability before it even goes into production. Most projects use react or angular because it makes onboarding new members easier, and these frameworks really aren't as b…

The phrase is Achilles' heel for which the tendon is named.

Re: Why React Re-Renders

#29

Post by 4pkjai »

spoils19 wrote: post #13
4pkjai wrote: post #4

Earlier quoted context omitted.

I'm among the React developers who don't really know how it works under the hood. Recently I needed to code a UI that required mouse drag events. It ran like a pig when I did it in React. I tried a few things to speed it up, but eventually gave up and did the UI in plain old Javascript. It runs a hell of a lot better, but the code does feel a lot more flimsy. Edit: Here's a demo of the UI I built https://www.youtube.…

I'm no expert, but mouse drag events in React are fairly simple to get working performantly, even without understanding how it works under the hood. There are even many libraries that provide functionality, all without it running 'like a pig'.

Yes, but I didn't want to use a library because I was doing something a bit out of the usual case.

I do like understanding my code as much as possible. So I was choosing between: 1. Understand React better, and reading about the "React" way to use these mouse events. 2. Doing it in VanillaJS

Re: Why React Re-Renders

#30

Post by ramesh31 »

4pkjai wrote: post #29
spoils19 wrote: post #13

Earlier quoted context omitted.

I'm no expert, but mouse drag events in React are fairly simple to get working performantly, even without understanding how it works under the hood. There are even many libraries that provide functionality, all without it running 'like a pig'.

Yes, but I didn't want to use a library because I was doing something a bit out of the usual case. I do like understanding my code as much as possible. So I was choosing between: 1. Understand React better, and reading about the "React" way to use these mouse events. 2. Doing it in VanillaJS

>I do like understanding my code as much as possible. So I was choosing between: 1. Understand React better, and reading about the "React" way to use these mouse events. 2. Doing it in VanillaJS

The great thing about the "React" way of doing things is that it's just the JavaScript way of doing things.

React can be summed up entirely as: "a function that takes in props and returns rendered HTML". It is not a framework. There is no black magic. There are no idioms. There are no batteries included.

Anything else you do with it beyond that is entirely up to you.

Post reply on HN