Demystifying Rendering Behavior in React

React‘s rendering behavior has remained an enigma for many.

Content Navigation show

As developers, we often focus on crafting reusable components and leveraging the latest APIs. Internally, we take for granted that React automagically handles presenting these components to the DOM.

However, as our apps grow in complexity, misconceptions around React rendering can come back to haunt us. We realize that components which seemed fast in isolation bog down at scale. The UI inexplicably slows down despite no noticeable bottleneck.

Eventually, we resign ourselves to "React being slow" or "needing a rewrite".

However, in most cases the root cause is suboptimal rendering.

Having confronted such woes first-hand, I share your pain! This motivated my deep-dive into understanding React‘s internals over the years.

And I assure you – armed with insights from this guide – you‘ll never again be helpless against React performance gremlins!

We‘ll cover:

  • What does "rendering" actually mean in React?
  • When and why does re-rendering occur?
  • Actionable techniques to optimize rendering performance

So without further ado, let‘s get rendered!

Peering Behind React‘s Rendering Curtains

Rendering holds a different meaning in React than traditional UI frameworks.

In React, rendering refers to reconciling the virtual DOM against the real DOM.

Let‘s expand on what this entails:

  1. The virtual DOM is a JavaScript representation of the actual DOM state
  2. Enabled blazing fast rendering by minimizing DOM updates
  3. When component state changes, the virtual DOM re-calculates
  4. The updated virtual DOM is compared against the previous snapshot
  5. Only real DOM elements affected by state changes are updated

This process underscores how React achieves stellar rendering speeds compared to manipulating the DOM directly.

To visualize rendering, consider this JSX snippet:

<div className="App">


  <CustomButton>Click me</CustomButton>
</div>

Which compiles to:

React.createElement(
  "div",
  { className: "App" },

  React.createElement("h1", null, "Hello World"),

  React.createElement(CustomButton, null "Click me")   
);

Constructing React elements – objects which represent these DOM nodes:

{
  type: "div",
  props: {
    className: "App",
    children: [
      {
        type: "h1",
        props: {
          children: "Hello World"     
        }
      },
      {
        type: CustomButton,
        props: {
          children: "Click me" 
        }  
      }
    ]
  }
}

This virtual DOM snapshot is rendered against the real DOM through reconciliation.

Now that you‘ve peered behind React‘s rendering curtains, let‘s shift gears to why re-rendering occurs.

Common Triggers for Re-rendering

React apps re-render when component state or props get updated. By default, React re-renders the entire component subtree under such parents.

Parent Component
  -> Child Component
    -> Grandchild Component

So if Parent Component state updates, Child and Grandchild re-render too although unchanged!

These cascading re-renders stem from two primary triggers:

Parent Component Re-renders

When a parent component re-renders, all its children re-render automatically!

For example, this Parent component houses child Profile:

function Parent() {

  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>

      <Profile />
    </div>
  ) 
}

function Profile() {
  return <h3>I‘m the Profile!</h3>; 
}

Here, clicking the counter button triggers Parent to re-render. Even though Profile remains unchanged, it will wastefully re-render too!

Such cascading re-renders seem trivial in isolation. But they quickly accumulate across increasing component trees, degrading performance.

Context API Changes

The React Context API is another common re-rendering offender.

Consider a ThemeContext provider wrapping the entire App: 

const ThemeContext = React.createContext();

function App() {

  return (
    <ThemeContext.Provider value={theme}>  

      {/* ...components */}

    </ThemeContext.Provider>
  );
}

Now any change in theme triggers every connected component to re-render!

This happens regardless of whether the component actually utilizes theme or not.

Such aggressive re-rendering drastically impacts performance at scale. Let‘s now learn to prevent it.

Strategies for Optimized Rendering

Here are 5 actionable tips to optimize rendering performance in React apps:

1. Manage State with Redux

Redux resolves a majority of React performance pain points out-of-the-box via smart state management.

It enforces normalized state and immutable reducers – making changes highly predictable. Components only re-render on the precise slice of state they depend upon.

Redux also offers DevTools for tracking every state change triggering re-renders. This makes optimization effortless:

[image]

Additionally, Redux co-locates app state in a single store vs distributed across components. This facilitates easy debugging from one source of truth.

Overall, Redux architecture aligns perfectly with React rendering principles. The wins compound dramatically at scale in huge codebases.

2. Implement Component Memoization

We can leverage React‘s memo API to memoize component outputs.

This memorizes previous renders, and skips re-rendering if next props are identical: 

function MyComponent(props) {
  // renders only on prop changes  
}

export default React.memo(MyComponent);

Underlying logic:

let prevProps; 

function MyComponent(nextProps) {

  if (nextProps === prevProps) {
   // skip rendering
  } else {
    // render component
    prevProps = nextProps;  
  }

}

Avoid memoizing constantly changing components (like counters). Optimally, target reusable static components.

I observed over 40% render improvements from targeted React.memo usage in mature apps. Your mileage may vary.

3. Virtualize Long Lists

Say your PostsList renders 100s of items. And you push a new post.

Without virtualization, the entire list re-renders although only 1 post changed!

Solutions like react-window tackle this:

import { FixedSizeList } from ‘react-window‘;

function PostsList() {
  return (
    <FixedSizeList 
      height={600}
      width={300}
      itemCount={1000}
      itemSize={35}
    >
      {/*Only renders visible rows*/}
    </FixedSizeList>
  )
}

Such virtualization libraries only render visible items in viewport. This translates to radical performance gains for long lists.

4. Leverage Code Splitting

Bundling all app code into one mammoth bundle paralyzes initial loading.

We can leverage React‘s React.lazy API to automatically code split bundles and defer loading components until usage:

const Home = React.lazy(() => import(‘./Home‘));
const ContactUs = React.lazy(() => import(‘./ContactUs‘));

const App = () => (
  <Router>
    <Suspense fallback={<Spinner />}>
      <Switch>
        <Route path="/" component={Home}/>  
        <Route path="/contact-us" component={ContactUs}/>
      </Switch>
    </Suspense>
  </Router>
);

This chunks components into separate bundles loaded on-demand. Lightning fast initial loads!

5. Profile with React Profiler

React Profiler API provides granular insights into why components re-render:

[GIF showing profiling]

This reveals optimization candidates to selectively target:

const App = () => {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1); 
  }

  return <Button onClick={handleClick}>By the count of {count}</Button>
}   

const root = ReactDOM.createRoot(domNode);
root.render(
  <Profiler id="App" onRender={callback}>
    <App />
  </Profiler>
);

Add Profiler wrappers and inspect re-renders. Optimize components monopolizing resources as needed.

However – don‘t start prematurely optimizing code for the sake of it. As the old adage goes:

Premature optimization is the root of all evil

Instead, only optimize when bad rendering patterns indicate a clear performance problem.

So tackle React performance issues in three strategic steps:

1. Profile – Use tools like React Profiler to identify sluggish components

2. Understand – Pinpoint the reasons behind suboptimal rendering

3. Optimize – Apply targeted optimizations to boost performance

Rinse and repeat as needed!

Key Takeaways

Let‘s recap the core concepts behind React rendering:

  • Rendering refers to reconciling virtual DOM with real DOM
  • Parent/Context re-renders cascade down the component tree
  • Tools like Redux, React.memo and Profiler optimize rendering
  • Always profile before blindly optimizing code

Internalizing these lessons is crucial for mastering React performance.

I especially want to reiterate the importance of profiling before optimizing. Resist the urge to prematurely micro-optimize.

Instead, use tools like React Profiler to pinpoint genuine problems. Then surgically apply fixes only where they impact end-users.

With this mindset, you‘ll eliminate 90% of React performance gremlins at their very source!

On that high note, I wish you the best with building blindingly fast React UIs! Do ping me any lingering questions.

Happy rendering!

Tags: