05-ReactJS State Management (useState) with Video in Khmer

Hello my friends! Today let me show you step by step how State Management (useState) works in ReactJS! State is one of the most important concepts in React. It allows our components to remember data and automatically update the UI whenever data changes! Very easy explanation with code examples and video demo in Khmer!

1. What is State in ReactJS?

State is a built-in React feature used to store dynamic data that changes over time (like counter value, form input, user login status, or shopping cart items). For an in-depth reference, check the React useState Documentation. Make sure you understand how data flows in 02 - Functional Component with Props!

Why not use regular variables?

If you change a normal JavaScript variable like let count = 0; count++, your web page will NOT re-render or show the new value. But when you update a React State, React detects the change and updates the UI instantly!

2. Counter State: Functional vs Class Component

Functional Component with useState Hook (Modern Way)

In Functional Components, we use the useState hook. It returns an array with 2 items:

1. Current state value (count)
2. State updater function (setCount)

import React, { useState } from 'react';

function CounterFunction() {
  // Declare state with initial value = 0
  const [count, setCount] = useState(0);

  return (
    <div className="p-4 border rounded">
      <h2>Functional Counter: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increment (+1)</button>
      <button onClick={() => setCount(count - 1)}>Decrement (-1)</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default CounterFunction;

Class Component with this.state (Legacy Way)

In Class Components, state is initialized in this.state inside constructor, and updated using this.setState().

import React, { Component } from 'react';

class CounterClass extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div className="p-4 border rounded">
        <h2>Class Counter: {this.state.count}</h2>
        <button onClick={this.increment}>Increment (+1)</button>
      </div>
    );
  }
}

export default CounterClass;

💡 Tip: Always prefer useState hook in Functional Components! Class components require verbose constructors, binding this, and this.setState(), whereas useState is super clean and short!

Watch Video: Counter State in Functional vs Class Component (Khmer)

3. Functional Component with Multiple State Values

You can use multiple useState hooks in a single component, OR manage a single object state!

Approach 1: Multiple useState Hooks (Recommended)

import React, { useState } from 'react';

function UserProfile() {
  const [name, setName] = useState("Sok Dara");
  const [age, setAge] = useState(22);
  const [role, setRole] = useState("Developer");

  return (
    <div>
      <h3>Name: {name}</h3>
      <h3>Age: {age}</h3>
      <h3>Role: {role}</h3>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
      <button onClick={() => setRole("Senior Developer")}>Promote</button>
    </div>
  );
}

export default UserProfile;

Approach 2: State as Object (Using Spread Operator ...)

When state is an object, you must preserve existing properties using the JavaScript spread operator (...).

import React, { useState } from 'react';

function UserForm() {
  const [user, setUser] = useState({ name: "Keo Bopha", age: 20 });

  const updateName = (e) => {
    setUser({ ...user, name: e.target.value }); // Keep age intact!
  };

  return (
    <div>
      <input type="text" value={user.name} onChange={updateName} />
      <p>User Name: {user.name}, Age: {user.age}</p>
    </div>
  );
}

💡 Tip: Never mutate state directly like count = 5 or user.name = "Dara"! Always call the updater function setCount(5) or setUser({...}), otherwise React won't know state changed and page won't re-render! Read more about component memory on React Docs: State A Component's Memory.

💡 Tip: If your new state depends on previous state value, use callback function form inside updater: setCount(prevCount => prevCount + 1). This avoids race conditions in fast updates!

Watch Video: Managing Multiple State Values with useState in Khmer

💡 Next Lesson: Ready for routing? Check out 06 - ReactJS Basic Routing with React Router!

---

Hope this post helps you understand React State and useState hook easily! Practice creating your own counter or form state. Happy coding my friends! Sharing is caring!