Why React Re-Renders
joshwcomeau.com
Why React Re-Renders
1–10 of 168 posts
Re: Why React Re-Renders
#2JS works in mysterious ways.
Re: Why React Re-Renders
#3JS works in mysterious ways.
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.
Re: Why React Re-Renders
#4JS works in mysterious ways.
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.com/watch?v=Wt71bNYe3qc
Re: Why React Re-Renders
#5If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
Re: Why React Re-Renders
#6If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
If you are starting to learn front-end development today, you may question the choice of React.
Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now.
Re: Why React Re-Renders
#7If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
[deleted]
Re: Why React Re-Renders
#8If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
This is diffused cultural knowledge, but most of the ideas in React can be understood as: view = render(state). It re-renders everything all the time. But practical considerations force some optimizations. Everything else in React follows from those optimizations.
For example, if you destroy and re-create DOM all the time, then it loses critical information like user's cursor position and text selections. It is also slow to read and write to the DOM. Thus the need for an intermediate data structure, the virtual DOM.
React re-renders the virtual DOM every time the state changes. And it then diffs the previous and current ones against each other and does just the minimal number of DOM mutations to sync it up. To speed this up a bit, array elements are denoted with "key" so (I assume) there is a way to see if an element has been added or deleted.
But re-rendering the virtual DOM all the time can also be costly in terms of performance. Thus the next set of optimizations: React.memo+immutable data, and so on..
Re: Why React Re-Renders
#9If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
If you are starting to learn front-end development today, you may question the choice of React. Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now.
>Consider that a decade ago, people who were starting with the frontend were learning jQuery, which is almost irrelevant now.
It's not that simple. At the time, jQuery was absolutely pivotal in bringing about ES5 and the transpilation revolution on the front end. More or less its' entire API was subsumed by the browsers, and so jQuery became unnecessary, but far from irrelevant.
I can see the same thing happening today with React/JSX. There is simply no better way of expressing a UI than JSX-like components. And FRP as a paradigm for UI development is here to stay. So the future of web dev probably looks something like Yew [0].
Re: Why React Re-Renders
#10If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
The idea is you shouldn't really need to. You have tools to memoize expensive operations in a React-friendly way, but even then you shouldn't really have to think about render cycles.
YMMV but I the only time I've ever had to really think about this stuff was when trying to frankenstein legacy jQuery code into a React app.