The opposite of Big Misconception #1 is also common. People who think React never re-render anything besides very specific areas that needs to be updated.
Why React Re-Renders
141–150 of 168 posts
Re: Why React Re-Renders
#142> I know some developers believe that every state change in React forces an application-wide render, but this isn't true. Re-renders only affect the component that owns the state + its descendants (if any). The App component, in this example, doesn't have to re-render when the count state variable changes.
Does that mean if i have a redux store attached to my app it rerenders everything when i change something small in the store? Because the store is usually one of the top most HOCs.
Re: Why React Re-Renders
#143React would have been great in a functional language with immediate data structures. Instead it’s used with JavaScript, where you have to constantly force yourself to create your prop objects in a very specific way to avoid or force (re)rendering. It’s a constant struggle to control re-rendering. I still can’t believe React became as big as it is. Vue and Angular just fit JavaScript better.
> immediate data structures Immutable? But React in JS is a blessing – it brought good thinking to messy world. And as a direct influence, JS will adopt immutable data structures – tuples and records. https://github.com/tc39/proposal-record-tuple
I just cannot wait for this to come to the browsers. This will massively (and positively) impact how I can write JS.
Re: Why React Re-Renders
#144> I know some developers believe that every state change in React forces an application-wide render, but this isn't true. Re-renders only affect the component that owns the state + its descendants (if any). The App component, in this example, doesn't have to re-render when the count state variable changes. Does that mean if i have a redux store attached to my app it rerenders everything when i change something small…
No. The redux component is just a simple React context that uses `children` [1]:
{children}
And `children` behave diferently. `children` is a prop and thus not considered as an element of the Provider component, but of the App component [2]. Meaning the components inside `children` will rerender when App renders, and not when Provider renders.
1: https://github.com/reduxjs/react-redux/blob/master/src/compo...
2: https://www.developerway.com/posts/react-elements-children-p...
Re: Why React Re-Renders
#145Earlier quoted context omitted.
Bingo. And this is the situation we are in. Even knowing basically what's going on and still getting it wrong with just the bare minimum choices of ,_ or ,[]. Mix in actual deps coming from other hooks, changing as the components re-render, and multiple layers of "custom hooks" with more of the same and it's like trying to hold back a tsunami.
They could've easily added useOnMount, useOnRender, etc It doesn't matter that they are sugar. Just like useState is built on useReducer, it would be massively helpful to simplify and clarify what's going on.
They very purposefully didn't add useOnMount because of the subtle bugs developers introduce when they do things only on mount. People would react to the initial props in componentDidMount, but never respond to their change.
Hooks, and useEffect, was supposed to be designed in a way to eliminate that class of bugs.
Re: Why React Re-Renders
#146Don’t browsers already have similar update logic implemented in their HTML DOM?
If the DOM tree stays but a property of some element changes, if that property affects size or layout or other visual state of things, the browser will re-render the changed element, along with any dependent elements. Could be many elements when re-layout is needed, could be just one if the only change is color.
Re: Why React Re-Renders
#147React would have been great in a functional language with immediate data structures. Instead it’s used with JavaScript, where you have to constantly force yourself to create your prop objects in a very specific way to avoid or force (re)rendering. It’s a constant struggle to control re-rendering. I still can’t believe React became as big as it is. Vue and Angular just fit JavaScript better.
MobX is exactly what you're looking for: https://github.com/mobxjs/mobx
Vue works similar to React + MobX, but with weird design decisions like implicit reactivity, and a stale ecosystem thanks to the Vue2 vs Vue3 debacle.
Re: Why React Re-Renders
#148A pain point with React is large data structures. To re-render (assuming class components), you can setState with the changed property. For example if your state has two properties named foo and bar, and bar has changed then you call setState({ bar: newValue }). This works if you have simple properties. What if you have large complex data structures, and you need to modify a property deep down inside? Then you can ma…
Use MobX https://github.com/mobxjs/mobx
Re: Why React Re-Renders
#149> I know some developers believe that every state change in React forces an application-wide render, but this isn't true. Re-renders only affect the component that owns the state + its descendants (if any). The App component, in this example, doesn't have to re-render when the count state variable changes. Does that mean if i have a redux store attached to my app it rerenders everything when i change something small…
No, there is optimization happening at Redux level to ensure components only gets updated when they need to, but it's up to you to ensure your store is properly designed and consumed to avoid unnecessary updates.
Look up Mark Erikson's blog[1], who's a Redux maintainer, for a lot of details on Redux's internals (acemarke on HN), he also answers tons of questions everywhere[2] about Redux, he helped me so much understand it!
[1] https://blog.isquaredsoftware.com/ [2] https://stackoverflow.com/a/40386189
Re: Why React Re-Renders
#150Before you memo, give Before You Memo() [0] a read.
Building on Josh's bit about the UI tree (It's not about the props) [1], just separate the counter and the decoration in to separate sub trees. Doing so leads to nicer component structures anyway.
[0] - https://overreacted.io/before-you-memo
[1] - https://www.joshwcomeau.com/react/why-react-re-renders/#its-...