Category: React

When building interactive UIs with React, two core concepts you must understand are state and lifecycle. These are what make React components dynamic, interactive, and responsive.

In this post, we’ll explore:

• What state is in React
• How lifecycle methods work
• The difference between class and functional components
• How to use hooks like useState and useEffect

What is State in React?

In React, state refers to data that changes over time. It is managed within a component and can influence what gets rendered on the screen.

When the state of a component updates, React re-renders that component automatically.

Example: A Simple Counter Using useState

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Declare state variable

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click Me
      </button>
    </div>
  );
}

useState(0) initializes the state with 0.

setCount is the function used to update the state.

React re-renders the component every time count changes.

Understanding Lifecycle in React

Every React component goes through a lifecycle:

1. Mounting – Component is being inserted into the DOM.
2. Updating – Component updates due to changes in state or props.
3. Unmounting – Component is removed from the DOM.

These phases allow us to hook into key moments of a component’s existence.

Lifecycle Methods in Class Components

React class components come with lifecycle methods that allow you to run code at specific times.

Method	Description
componentDidMount()	Runs after the component is added to the DOM
componentDidUpdate()	Runs after an update happens
componentWillUnmount()	Runs before the component is removed

Example: Timer Component Using Class

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prev => ({ seconds: prev.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}

Lifecycle in Functional Components with Hooks

With React Hooks, you can achieve the same lifecycle behavior in functional components using the useEffect hook.

Example: Timer with useEffect

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // Cleanup on unmount
  }, []);

  return <p>Seconds: {seconds}</p>;
}

useEffect with an empty dependency array ([]) acts like componentDidMount.
The return function handles cleanup, similar to componentWillUnmount.

State vs Props: Key Differences

Feature	State	Props
Owned by	The component itself	The parent component
Mutability	Mutable	Immutable
Usage	Manage local data	Pass data to child components

Why Are State and Lifecycle Important?

Mastering state and lifecycle is essential to:

• Build dynamic interfaces
• Handle asynchronous events
• Manage API calls
• Optimize performance with controlled re-renders
• Avoid memory leaks with proper cleanup

Related Concepts to Explore

• React Context for global state
• Custom hooks for reusable logic
• React Router for navigation
• Performance optimization with React.memo and useCallback

Final Thoughts

React is powerful because it reacts to state changes and renders UI dynamically. To build responsive and maintainable applications, understanding state and lifecycle is non-negotiable.

Whether you’re using class components or modern functional components with hooks, these tools are the foundation of every interactive React app.

React has become one of the most popular JavaScript libraries for building modern, interactive user interfaces — especially single-page applications (SPAs). Developed by Facebook, React makes it easier to manage complex UI logic through reusable components, efficient rendering, and a clean programming model. In this blog, we’ll explore the three core building blocks of React: Components, JSX, and Props.

---

What Is React?

React is a component-based library used to build dynamic web interfaces. Instead of manipulating the DOM directly, React uses a virtual DOM to efficiently update only the parts of a webpage that change. This results in better performance and a more maintainable codebase.

---

Understanding Components

Components are the heart of React. They are reusable, independent pieces of UI that can be combined to create complex applications. Think of them as custom HTML elements that encapsulate structure, styling, and logic.

There are two main types of components:

1. Functional Components – These are simple JavaScript functions that return JSX. function Welcome() { return <h1>Hello, React!</h1>; }
2. Class Components – Older React code often uses ES6 classes to define components. They include lifecycle methods and manage state internally. class Welcome extends React.Component { render() { return <h1>Hello, React!</h1>; } }

Most modern React code uses functional components with hooks (like useState and useEffect) for managing state and side effects.

---

What Is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that looks similar to HTML. It allows developers to write UI elements directly in JavaScript code, making it easy to visualize component structure.

Example:

const element = <h1>Welcome to React!</h1>;

Under the hood, JSX is compiled to JavaScript using tools like Babel:

const element = React.createElement('h1', null, 'Welcome to React!');

Why use JSX?

• It makes code more readable and expressive.
• It allows embedding JavaScript expressions using {}.
• It helps catch errors early through compilation.

---

Understanding Props

Props (short for “properties”) are how data is passed from one component to another — usually from a parent to a child. Props make components dynamic and reusable by allowing them to display different content based on the data received.

Example:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Usage
<Greeting name="Parmeet" />

In this example, the Greeting component receives the name prop and displays it dynamically. Props are read-only, meaning a component cannot modify the props it receives — this ensures predictable, one-way data flow.

---

Bringing It All Together

Let’s combine what we’ve learned with a simple React example:

function UserCard(props) {
  return (
    <div className="card">
      <h3>{props.name}</h3>
      <p>{props.role}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserCard name="Alex" role="Frontend Developer" />
      <UserCard name="Sam" role="UI Designer" />
    </div>
  );
}

Here:

• Each UserCard is a component.
• JSX defines the UI.
• Props (name and role) customize each card.

---

Final Thoughts

React’s component-based architecture, JSX syntax, and prop system together make it one of the most powerful tools for building scalable UIs. Whether you’re developing a simple portfolio site or a complex dashboard, mastering these fundamentals is the first step toward becoming proficient in React.

In upcoming posts, we’ll dive deeper into State, Hooks, and Component Lifecycle — the next layers of React mastery.

---

Ready to start building with React?
Install Node.js, set up your first React app using Create React App, and start experimenting with components today!