Rendering

Introduction

It all starts with mounting (Create), when a component first comes to life. During mounting the following happens

initializes it states
run its hooks
and commit to the DOM

Then there is umounting (Delete), when React detects a component is not needed anymore. Destorying the component’s instance, states and all the DOM elements

Re-rendering (Update), is much faster, React attempts to re-use everything it can, like component’s instance and update already created DOM elements with new properties.

Conditions for react components to re-render

Component state changes
Parent component re-renders
Context changes

1. Re-rendering due to state changes

// `App` will re-render if isOpen state update triggered
const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Click me</Button>
      {/* All these will be re-rendered! */}
      <HeavyModal />
      <HeavyComponent />
    </div>
  );
};

Imagining a typical React application as a tree, everything down from where the state update happened down to its children and grand children will re-rendered.

2. Re-rendering due to parent component re-rendering

Pretty much the same example as in 1.. In this case, <HeavyModal /> and <HeavyComponent /> will re-render as its parent App re-renders due to state change

// `App` will re-render if isOpen state update triggered
const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Click me</Button>
      {/* All these will be re-rendered! */}
      <HeavyModal />
      <HeavyComponent />
    </div>
  );
};

3. Context Changes

When a component consumes a state from a Context provider, it will re-render if that state changes.

Primitive vs Non-primitive Props

Non-primitive values in JavaScript are compared by Reference

{ display: 'flex' } === { display: 'flex' } // false

You can preserve reference to a non-primitive value with useMemo.

You can preserve reference to a function with useCallback

Prop change does not triggers a re-render

A prop change does not re-render a component if the prop is stored as a local variable. it only re-renders when the prop is stored as a state variable.

Instead, a re-render causes a change in props. It’s a subtle but vital distinction in how the React engine actually works.

The “Direction” of CausalityMany developers think the flow is:

Prop Changes —> Triggers Render

In reality, the flow is:

State Change —> Parent Renders —> New Prop Value Passed —> Child Renders

Props are passive. They are just the “arguments” passed to a function. A function doesn’t execute just because its arguments exist; it executes because someone called it. In React, only State and Context updates are the “callers.”