• React Digest
  • Posts
  • Guide to React Rendering Behavior Updated to cover React 18

Guide to React Rendering Behavior Updated to cover React 18

#377 – October 10, 2022

sponsor

PrimeReact is a UI component library for React with 80+ open source UI components, 30+ themes featuring material, bootstrap, tailwind styling, 350+ ready to use UI blocks, theme designer to build custom styles, an advanced figma UI Kit and professional support service. The library is developed by PrimeTek who is also known for extremely popular PrimeFaces, PrimeNG and PrimeVue.

this week's favorite

I've seen a lot of ongoing confusion over when, why, and how React will re-render components, and how use of Context and React-Redux will affect the timing and scope of those re-renders. After having typed up variations of this explanation dozens of times, it seems it's worth trying to write up a consolidated explanation that I can refer people to. Note that all this information is available online already, and has been explained in numerous other excellent blog posts and articles, several of which I'm linking at the end in the "Further Information" section for reference. But, people seem to be struggling to put the pieces together for a full understanding, so hopefully this will help clarify things for someone.

React-Query is often described as “The missing data fetching library” for React, because of the reason that React is a UI library that has no opinions on how we fetch the data from the server.

Regardless of the chosen pattern, according to which the application is created, the presentation layer needs to be fed with data. Therefore, each “React app” requires something to store and provide data on an ongoing basis. It could be a server, it could be the famous Redux, it could be Observables. The latter is operated by the RxDB database.

We love React and we've been very happily using it since 2015, but the dev experience and performance has always been held back by one fundamental flaw. We think we've found a way to solve it, to make React both faster and easier to use.

This article is a deep dive into the inner workings of selectors, subscribers, preventing re-renders, and more. The examples given will be based on the React ecosystem, but if you’re coming from a different framework, there are lessons to be learned as well.

newsletters