React State & Events

State and Event Handling in React

Modern websites are interactive. Buttons can be clicked, forms can be filled, menus can open, and counters can increase. React makes these interactions possible using two important concepts: state and event handling.

State allows a component to store and update data, while event handling lets React respond to user actions such as clicks, typing, or form submissions.

These two concepts work together to create dynamic and interactive applications.

What is State?

State is a built-in React feature used to store information that can change over time.

Whenever the state changes, React automatically updates the user interface to display the latest information.

Why Do We Need State?

Without state, React components would always display the same information.

State allows components to:

• Count button clicks
• Show or hide content
• Store form input
• Display notifications
• Update shopping carts
• Change themes
• Track login status

State makes React applications interactive.

Creating State with useState

In modern React, state is created using the useState Hook.

import { useState } from "react";

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

  return <h2>Count: {count}</h2>;
}

Explanation

• useState(0) creates a state variable with an initial value of 0.
• count stores the current value.
• setCount() updates the value.
• Whenever setCount() is called, React automatically updates the displayed value.

Updating State

State should always be updated using its setter function.

import { useState } from "react";

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

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

Output

Each time the button is clicked:

Count: 1
Count: 2
Count: 3
...

React automatically refreshes the displayed number without reloading the page.

What is Event Handling?

An event is an action performed by the user.

Examples include:

• Clicking a button
• Typing in a textbox
• Moving the mouse
• Submitting a form
• Pressing a keyboard key

Event handling means telling React what to do when one of these events happens.

Handling a Click Event

One of the most common events is a button click.

function App() {
  function showMessage() {
    alert("Button Clicked!");
  }

  return (
    <button onClick={showMessage}>
      Click Me
    </button>
  );
}

Explanation

• onClick is a React event.
• When the button is clicked, the showMessage() function runs.
• The browser displays an alert message.

Combining State and Events

State and event handling are often used together.

import { useState } from "react";

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

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

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={increaseCount}>
        Increase
      </button>
    </div>
  );
}

How It Works

• The state starts with 0.
• The user clicks the button.
• The click event calls increaseCount().
• setCount() updates the state.
• React automatically updates the number on the screen.

This automatic update is one of React's biggest advantages.

Handling Input Fields

State is commonly used with forms.

import { useState } from "react";

function UserForm() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        onChange={(event) => setName(event.target.value)}
      />

      <h2>Hello, {name}</h2>
    </div>
  );
}

Explanation

• The user types into the input field.
• The onChange event runs whenever the text changes.
• setName() saves the latest value in the state.
• React updates the greeting immediately.

Common React Events

React provides many built-in events.

Event         Description
onClick       Triggered when a user clicks an element.
onChange      Triggered when the value of an input changes.
onSubmit      Triggered when a form is submitted.
onMouseOver   Triggered when the mouse moves over an element.
onKeyDown     Triggered when a keyboard key is pressed.

These events help create responsive and interactive user interfaces.

Best Practices

When working with state and events:

• Always update state using its setter function.
• Never modify state directly.
• Keep state only where it is needed.
• Give event handler functions meaningful names.
• Keep event handling code simple and easy to read.
• Store only the data your component needs.

Following these practices makes your code cleaner and easier to maintain.