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

31–40 of 168 posts

Re: Why React Re-Renders

#31

Post by isbvhodnvemrwvn »

4pkjai wrote: post #4
codingdave wrote: post #3

Earlier quoted context omitted.

I think that is the point, is that it does not. It is code, and it does what it is told. But it is quite possible to be a professional dev without fully understanding exactly how and why your frameworks doing their thing, so it feels hand-wavy and mysterious.

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

It's not unlikely that you missed some hints of the latter part of the article (JS equality for functions or objects) although it's difficult to say without seeing the code.

Re: Why React Re-Renders

#32

Post by cantSpellSober »

4pkjai wrote: post #4
codingdave wrote: post #3

Earlier quoted context omitted.

I think that is the point, is that it does not. It is code, and it does what it is told. But it is quite possible to be a professional dev without fully understanding exactly how and why your frameworks doing their thing, so it feels hand-wavy and mysterious.

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

Draggable UI (w/o libraries) is one of the places I enjoy React most, maybe re-rendering wasn't to blame. Might have been an issue under the hood (as drag fires multiple times a second)? From the article:

> I think as developers, we tend to overestimate how expensive re-renders are. In the case of our [pure] component, re-renders are lightning quick.

> If a component has a bunch of props and not a lot of descendants, it can actually be slower to check if any of the props have changed compared to re-rendering the component.

Re: Why React Re-Renders

#33

Post by fabian2k »

The big part that seems to thoroughly confuses developers new to React is the difference between rendering and reconciliation. This is not particularly difficult to understand, but the original emphasis on the virtual DOM seems to lead to a misunderstanding on how React works. The vDOM plays a role only after rendering happened, so all that diffing stuff doesn't have anything to do with rendering. To me that seems like one of the primary causes of developers being surprised that React rerenders more than they expect.

I like the explanation on what triggers rendering in this post. Props and state are usually used in the explanation for this part, but props actually only matter if you want to use React.Memo. And the one part every React developer should know is that in the absence of React.Memo all children will rerender if any state changes.

Re: Why React Re-Renders

#34

Post by westoncb »

ramesh31 wrote: post #30
4pkjai wrote: post #29

Earlier quoted context omitted.

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…

That’s a bit too strong imo. There is magic, and it can generally be found in implicit re-render conditions.

Re: Why React Re-Renders

#35

Post by spoils19 »

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

My point was not to use a library, but that many others have implemented functionality in libraries without performance decreases. Granted, your use case may be special to the point where vanilla JS is better, but given how many libraries are out there, as well as how many may simply be poorly implemented yet still work fast, makes me wonder what you were indeed doing.

Re: Why React Re-Renders

#36

Post by gervwyk »

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…

Sound pretty interesting! We’ve also implemented a DSL on top of React, see Lowdefy [0]

We’ve taken a different approach, we’ve written a pure js engine which computes and manages state based on operator used to express logic, and then have a recursive render loop in react which provives engine with update hooks to it uses to rerender components when it should. That way we can very handle complex state logic and then update with ease all without dealing with passing state up and down.

We still have a few ideas on how to further optimize which will be built in future versions. But already we, and the OS community are building some advanced apps using Lowdefy

[0] - https://github.com/lowdefy/lowdefy

Re: Why React Re-Renders

#37

Post by willio58 »

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…

You can get away with a lack of understanding about these things and still create beautiful products. For an example just look at Josh’s website. Beautiful react and design execution without knowing these details about rerendering.

Re: Why React Re-Renders

#39

Post by fabian2k »

srk_hn wrote: post #38

Can someone tell me why this page needs 13MB of resources to display?

It's even more for me, it looks to me like the embedded React sandboxes are essentially full React apps in development mode. So none of the usual optimizations for size are active, and you get the full devel-mode bundle for several React applications on this page.

Re: Why React Re-Renders

#40

Post by MH15 »

srk_hn wrote: post #38

Can someone tell me why this page needs 13MB of resources to display?

My guess is for the code editors and associated transpiler. The demos allow you to edit the code in JSX, requiring the tooling. Kinda impressive imo.
Post reply on HN