⚛️ State Initialization in React

? Quick Overview

State initialization is the process of setting the starting (default) values of a component’s state. Proper initialization ensures that your component renders predictable and stable data before any updates occur.

In React, you can initialize state in:

✅ Functional components using the useState() hook
✅ Class components using the constructor and this.state
✅ Different styles such as default, dynamic, lazy, and complex (objects/arrays) initialization

? Key Concepts

Default initialization – providing a constant starting value like 0 or "".
Dynamic initialization – deriving the initial value from props or calculations.
Lazy initialization – passing a function to useState so heavy work runs only once.
Complex initialization – setting state to objects or arrays for grouped/related data.
Class component initialization – using this.state inside the constructor.

? Syntax & Theory

Functional components (with useState):

const [state, setState] = useState(initialValue);
The initialValue is used only on the first render. Later updates ignore this value.

Class components:

Inside the constructor, you assign an object to this.state:
this.state = { key: initialValue };
You must call super() before setting this.state.

? Initializing State in Functional Components

Functional components use the useState() hook for state initialization.

? View Code Example – Basic Counter

// Functional component that initializes count to 0
import { useState } from "react";

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

  return (
    <div>
      <h3>Count: {count}</h3>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

? Explanation

useState(0) initializes count with 0 on the first render.
setCount updates the state and triggers a re-render.
The UI always shows the latest value of count.

⚙️ Lazy Initialization (Performance Optimization)

When the initial state value requires heavy computation, you can pass a function to useState. This function runs only once, during the initial render.

? View Code Example – Lazy Initialization

// Lazy state initialization with an expensive calculation
function ExpensiveComponent() {
  const [result, setResult] = useState(() => {
    console.log("Calculating initial state...");
    return 100 * 2; // Runs only once
  });

  return <h3>Result: {result}</h3>;
}

? Why Use Lazy Initialization?

The function passed to useState is executed only on the first render.
Subsequent renders reuse the previously stored state value.
This avoids repeating heavy calculations on every render.

?️ Initializing State in Class Components

In class-based components, state is initialized inside the constructor using this.state.

? View Code Example – Class Component

// Class component with state initialized in the constructor
import React, { Component } from "react";

class Profile extends Component {
  constructor() {
    super();
    this.state = {
      name: "Guest",
      age: 20,
    };
  }

  render() {
    return (
      <div>
        <h3>Name: {this.state.name}</h3>
        <p>Age: {this.state.age}</p>
      </div>
    );
  }
}

? Key Points

Always call super() before using this in the constructor.
this.state holds an object with initial values.
Each key in the state object represents a piece of UI data.

? Setting State from Props

Sometimes, initial state is derived from props — useful when a parent provides starting data.

? View Code Example – Initial State from Props

// Functional component initializing state from incoming props
function Welcome({ initialName }) {
  const [name, setName] = useState(initialName);

  return (
    <div>
      <h3>Welcome, {name}!</h3>
      <button onClick={() => setName("User Updated")}>Change Name</button>
    </div>
  );
}

? Explanation

The initial value of name comes from props.initialName.
Changing the state with setName updates the displayed name.
Remember: changes to the prop later do not automatically update the state.

? Complex State Initialization (Objects & Arrays)

You can initialize state with arrays or objects — React handles any JavaScript data type.

? View Code Example – Object & Array in State

// Complex state with an object and nested array
function Student() {
  const [info, setInfo] = useState({
    name: "Riya",
    marks: [90, 85, 88],
  });

  return (
    <div>
      <h4>Name: {info.name}</h4>
      <p>Average: {info.marks.reduce((a, b) => a + b) / info.marks.length}</p>
    </div>
  );
}

? What’s Happening?

State is initialized with an object containing name and marks.
marks is an array; reduce is used to calculate the total.
The component displays the student’s name and average marks.

? Default vs Dynamic Initialization

✅ Use default initialization for static starting values (like 0 or "").
✅ Use dynamic initialization for values derived from props or calculations.
✅ Use lazy initialization for performance-heavy computations.

? Tips & Best Practices

Always initialize state to prevent undefined variables in render.
For complex state, use objects or arrays with clear structure.
Use lazy initialization to optimize performance for expensive calculations.
When using props to initialize state, document that future prop changes won’t automatically sync.
Keep initial state values as simple and meaningful as possible.

? Try It Yourself

Create a Counter component that initializes its count to 10 using useState.
Create another component where state is derived from props (like initialValue).
Use a function-based lazy initializer that logs to the console when it runs.
Try initializing complex state like an object containing name and score.

Goal: Learn different ways to initialize state correctly and efficiently using useState in functional components and this.state in class components.