State Update Mechanics and Performance Optimization

Understanding Asynchronous State Updates

import React from "react";

function DisplayBanner(props) {
  return <h1>{props.text}</h1>
}

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'Initial Value'
    }
  }

  render() {
    return (
      <div>
        <h2>{this.state.text}</h2>
        <button onClick={() => this.updateText()}>Update Text</button>
        <DisplayBanner text={this.state.text} />
      </div>
    );
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component Updated:', this.state.text);
  }

  updateText() {
    /**
     * Why is setState asynchronous?
     * 1. Performance: Batching multiple setState calls to avoid frequent re-renders.
     * 2. Consistency: Ensures state and props stay in sync before the render occurs.
     * 
     * To access updated state immediately:
     * - Use the callback in setState: setState(updates, callback)
     * - Or use componentDidUpdate lifecycle
     */
    this.setState({ text: 'Updated Value' }, () => {
      console.log('Callback after update:', this.state.text);
    });
    console.log('Immediate log (stale):', this.state.text);
  }
}

Synchronous State Updates in Specific Contexts

import React from "react";

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { status: 'Idle' };
  }

  render() {
    return (
      <div>
        <h2>Status: {this.state.status}</h2>
        <button onClick={() => this.handleAsyncUpdate()}>Async Update</button>
        <button id="sync-btn">Sync Update</button>
      </div>
    );
  }

  componentDidMount() {
    const btn = document.getElementById('sync-btn');
    // Native DOM events trigger synchronous state updates
    btn.addEventListener('click', () => {
      this.setState({ status: 'Active' });
      console.log('Sync check:', this.state.status);
    });
  }

  handleAsyncUpdate() {
    // setTimeout also forces synchronous behavior
    setTimeout(() => {
      this.setState({ status: 'Pending' });
      console.log('Inside timeout:', this.state.status);
    }, 0);
  }
}

State Data Merging

import React from "react";

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello',
      author: 'John'
    };
  }

  render() {
    return (
      <div>
        <h2>{this.state.message}</h2>
 <h2>{this.state.author}</h2>
        <button onClick={() => this.modifyData()}>Change Message</button>
      </div>
    );
  }

  modifyData() {
    // React performs a shallow merge: Object.assign({}, prevState, newState)
    this.setState({ message: 'Hi there' });
  }
}

State Update Batching Logic

import React from "react";

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h2>Count: {this.state.count}</h2>
        <button onClick={() => this.increase()}>Increment</button>
      </div>
    );
  }

  increase() {
    // Direct state updates get batched (only last one counts)
    // this.setState({ count: this.state.count + 1 });
    // this.setState({ count: this.state.count + 1 });

    // Functional updates ensure correct accumulation
    this.setState((prev) => ({ count: prev.count + 1 }));
    this.setState((prev) => ({ count: prev.count + 1 }));
    this.setState((prev) => ({ count: prev.count + 1 }));
  }
}

React Rendering Pipeline

• Render Flow: JSX → Virtual DOM → Real DOM
• Udpate Flow: State/Props change → Re-render → New Virtual Tree → Diffing → DOM Patch
• Diffing Algorithm:
  • Comapres nodes layer by layer (no cross-level comparisons).
  • Different node types trigger full tree replacement.
  • Keys help React identify stable elements across renders.

The Role of Keys in Lists

import React from "react";

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: ['Item A', 'Item B'] };
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <button onClick={() => this.addItem()}>Add Item</button>
      </div>
    );
  }

  addItem() {
    this.setState({ items: ['New Item', ...this.state.items] });
  }
}

Key Notes:

• Keys must be unique and stable.
• Avoid random keys or using indexes if the list order changes.
• Same keys trigger movement; different keys trigger mount/unmount.

Controlling Render Behavior

import React, { memo } from "react";

class Header extends React.PureComponent {
  render() {
    console.log('Header render');
    return <h3>{this.props.count}</h3>;
  }
}

class Content extends React.Component {
  render() {
    console.log('Content render');
    return (
      <div>
        <MemoSidebar />
        <MainPanel />
      </div>
    );
  }
}

const MemoSidebar = memo(function Sidebar() {
  console.log('Sidebar render');
  return <h3>Sidebar</h3>;
});

function MainPanel() {
  console.log('MainPanel render');
  return <h3>Main Panel</h3>;
}

class Footer extends React.PureComponent {
  render() {
    console.log('Footer render');
    return <h3>Footer</h3>;
  }
}

export default class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    console.log('Main render');
    return (
      <div>
        <button onClick={() => this.increase()}>Increment</button>
        <Header count={this.state.count} />
        <Content />
        <Footer />
      </div>
    );
  }

  shouldComponentUpdate(nextProps, nextState) {
    // Return false to prevent unnecessary re-renders
    return true;
  }

  increase() {
    this.setState({ count: this.state.count + 1 });
  }
}

Supplementary Concepts and Component Types

Immutable State Updates

import React from "react";

export default class Main extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    };
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.users.map((user, idx) => (
            <li key={user.name}>
              {user.name} - {user.age}
              <button onClick={() => this.growOlder(idx)}>+1 Age</button>
            </li>
          ))}
        </ul>
        <button onClick={() => this.addUser()}>Add User</button>
      </div>
    );
  }

  addUser() {
    // Always create new references for state updates
    const newUser = { name: 'Charlie', age: 28 };
    this.setState({ users: [...this.state.users, newUser] });
  }

  growOlder(index) {
    const updatedUsers = [...this.state.users];
    updatedUsers[index] = {
      ...updatedUsers[index],
      age: updatedUsers[index].age + 1
    };
    this.setState({ users: updatedUsers });
  }
}

Event Bus for Cross-Component Communication

import React from "react";
import { EventEmitter } from "events";

const globalBus = new EventEmitter();

class Dashboard extends React.PureComponent {
  componentDidMount() {
    globalBus.on('notification', this.handleNotification);
  }

  componentWillUnmount() {
    globalBus.off('notification', this.handleNotification);
  }

  handleNotification = (msg) => {
    console.log('Received:', msg);
  };

  render() {
    return <div>Dashboard</div>;
  }
}

class Settings extends React.PureComponent {
  render() {
    return (
      <div>
        Settings
        <button onClick={() => globalBus.emit('notification', 'Update Available')}>
          Notify
        </button>
      </div>
    );
  }
}

export default class Main extends React.PureComponent {
  render() {
    return (
      <div>
        <Dashboard />
        <Settings />
      </div>
    );
  }
}

Accessing DOM and Component Instancse via Refs

import React from "react";

export default class Main extends React.PureComponent {
  constructor(props) {
    super(props);
    this.titleRef = React.createRef();
    this.counterCompRef = React.createRef();
    this.rawDomNode = null;
  }

  render() {
    return (
      <div>
        <h2 ref={this.titleRef}>Title</h2>
        <h2 ref={(el) => (this.rawDomNode = el)}>Another Title</h2>
        <button onClick={() => this.modifyDOM()}>Change DOM</button>
        <hr />
        <Counter ref={this.counterCompRef} />
        <button onClick={() => this.triggerChild()}>Call Child Method</button>
      </div>
    );
  }

  modifyDOM() {
    this.titleRef.current.innerHTML = "Updated via Ref";
    this.rawDomNode.innerHTML = "Updated via Callback Ref";
  }

  triggerChild() {
    this.counterCompRef.current.increase();
  }
}

class Counter extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }

  increase = () => {
    this.setState((prev) => ({ value: prev.value + 1 }));
  };

  render() {
    return <h2>Value: {this.state.value}</h2>;
  }
}

Controlled Components

import React from "react";

export default class Main extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { email: '' };
  }

  render() {
    return (
      <form onSubmit={(e) => this.submitForm(e)}>
        <label>
          Email:
          <input
            type="email"
            value={this.state.email}
            onChange={(e) => this.updateEmail(e)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

  updateEmail = (e) => {
    this.setState({ email: e.target.value });
  };

  submitForm = (e) => {
    e.preventDefault();
    console.log('Submitted Email:', this.state.email);
  };
}

import React from "react";

export default class Main extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { color: 'red' };
  }

  render() {
    return (
      <form onSubmit={(e) => this.submitForm(e)}>
        <select
          value={this.state.color}
          onChange={(e) => this.updateColor(e)}
        >
          <option value="red">Red</option>
          <option value="blue">Blue</option>
          <option value="green">Green</option>
        </select>
        <button type="submit">Save</button>
      </form>
    );
  }

  updateColor = (e) => {
    this.setState({ color: e.target.value });
  };

  submitForm = (e) => {
    e.preventDefault();
    console.log('Selected Color:', this.state.color);
  };
}

Uncontrolled Components

import React from "react";

export default class Main extends React.PureComponent {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  render() {
    return (
      <form onSubmit={(e) => this.submitForm(e)}>
        <label>
          Username:
          <input type="text" ref={this.inputRef} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }

  submitForm = (e) => {
    e.preventDefault();
    console.log('Input Value:', this.inputRef.current.value);
  };
}