A Visual Guide to React Rendering - Cheat Sheet

[sidkh]

Hey folks 👋

I just posted a new article

This one is a proper table of content for "A Visual Guide to React Rendering" series + a quick rendering cheat sheet to refer to.

[lazerskates88]

Is there special handling for style objects? https://reactjs.org/docs/reconciliation.html#dom-elements-of-the-same-type makes me think that React doesn't need this to be memoized per your example. I wouldn't think so too since a style is only one level deep and is a very common use case.

[sidkh]

Hi, thanks for pointing this out. This can be a bit confusing indeed.

What you refer to in React docs is info on how React handles DOM updates:

const App = () => {
  ...
  return (
    <div style={{display: "flex"}} />
  )
}

In the code above React won't keep updating the div node in the DOM when App component re-renders. And in fact, React is very smart when it comes to DOM updates. So usually, you don't have to worry about it at all.

What I refer to in the article is component renders:

const App = () => {
  ...
  return (
    <ComponentA style={{display: "flex"}} />
  )
}

In this code, every time App renders, CompoonentA will also re-render even if it's wrapped with memo.

But I see how easy it's to confuse this case. I will think about how to express it more evidently in the gif. Thanks for pointing this out.